Touch events seem to work fine in Chrome Devtools, but don't respond on mobile devices

Question

While using the mobile mode in Chrome dev tools, everything works fine. However, as soon as I upload my code to the server and try it on my iPhone, it is unresponsive.
Here is the a link to the unresponsive app and below is the code for my event listeners..

Link: Running App

Code:

// touch timer to stop and start
time.addEventListener('touchstart', (e) => {
    if (running === false){
        running = true;
        timer = setInterval(startTimer, 100);
    }
    else {
        running = false;
        clearInterval(timer);
    }
});

// touch '+' to increase speed by 0.5 mph
up.addEventListener('touchstart', (e) => {
    mph += 0.5;
    speed.innerHTML = `${mph.toFixed(1)} mph`
});

// touch '-' to decrease speed by 0.5 mph
down.addEventListener('touchstart', (e) => {
    if (mph >= 0.5){
        mph -= 0.5;
        speed.innerHTML = `${mph.toFixed(1)} mph`
    }
});

//Gathers start position for finger swipe
speedRow.addEventListener('touchstart', (e) => {
    xStart = e.changedTouches[0].pageX;
});

// Swipe finger to change speed
speedRow.addEventListener('touchmove', (e) => {
    e.preventDefault();
    xEnd = e.changedTouches[0].pageX;
    if (xStart < xEnd){
        mph += (Math.abs(xEnd - xStart)/1500)
    }
    else if (xStart > xEnd && mph > 0) {
        mph -= (Math.abs(xEnd - xStart)/1500)
    }
    speed.innerHTML = `${mph.toFixed(1)} mph`
});

Answer 1

Not sure if this answers your question, but mac desktop safari is throwing an error when your JS loads because "speed" is already a property on window that it doesn't want overwritten. It's likely that iOS safari is throwing the same error. EDIT: And that error may be stopping code execution.

You should either namespace all those constants in an object. Or wrap all of your code in an iffy to prevent that. You can't be sure what properties will already exist in the global context.

Update: Also, on the live site you're not passing 'e' in the 'touchstart' listener for speedRow, that could also be stopping execution on iOS safari.

UPDATE WITH THE ACTUAL ANSWER Just tested the live site on my iPhone. iOS safari is erroring and stopping execution because you're trying to overwrite the global time variable. Looks like it's working in chrome because Chrome doesn't have a global time variable. If you wrap your code in a iffy like this it will work:

(function () {var mili = 0;
var sec = 0;
var min = 0;
var running = false;
var timer;
var mph = 0;
var distanceTraveled = 0;


var xStart;
var xEnd;

const navbar = document.getElementById('navbar');
const time = document.getElementById('time');
const elapsedTime = document.getElementById('time');
const up = document.getElementById('increase');
const down = document.getElementById('decrease');
const runSpeed = document.getElementById('speed');
const distance = document.getElementById('distance');
const speedRow = document.getElementById('speedRow');


function startTimer(){
    mili += 100;
    if (mili > 999){
        mili = 0;
        sec +=1;
        distanceTraveled += (1/3600) * mph;
        if (sec > 59){
            sec = 0;
            min += 1;
        }
    }
    if (sec < 10){
        var strSec = `0${sec}`;
    }
    else{
        strSec =`${sec}`;
    }
    if (min < 10){
        var strMin = `0${min}`;
    }
    else{
        strMin =`${min}`;
    }
    if(mili < 100){
        if(mili === 0){
            strMili = '00'
        }
        else{
            var strMili = `${mili}`;
            strMili = strMili.slice(0, -1);
            strMili = `0${strMili}`;
        }
    }
    else{
        strMili = `${mili}`;
        strMili = strMili.slice(0, -1);
    }

    elapsedTime.innerHTML = `${strMin}:${strSec}:${strMili}`;

    distance.innerHTML = `${distanceTraveled.toFixed(2)} miles`;


}

time.addEventListener('touchstart', () => {
    if (running === false){
        running = true;
        timer = setInterval(startTimer, 100);
    }
    else {
        running = false;
        clearInterval(timer);
    }
});

up.addEventListener('touchstart', () => {
    mph += 0.5;
    runSpeed.innerHTML = `${mph.toFixed(1)} mph`
});

down.addEventListener('touchstart', () => {
    if (mph >= 0.5){
        mph -= 0.5;
        runSpeed.innerHTML = `${mph.toFixed(1)} mph`
    }
});

speedRow.addEventListener('touchstart', (e) => {
    xStart = e.changedTouches[0].pageX;
});

speedRow.addEventListener('touchmove', (e) => {
    e.preventDefault();
    xEnd = e.changedTouches[0].pageX;
    if (xStart < xEnd){
        mph += (Math.abs(xEnd - xStart)/1500)
    }
    else if (xStart > xEnd && mph > 0) {
        mph -= (Math.abs(xEnd - xStart)/1500)
    }
    runSpeed.innerHTML = `${mph.toFixed(1)} mph`
});

})()

If you have a mac you can use desktop Safari's inspector to debug mobile safari.