Difference between desktop and mobile Chrome

Question

This below code runs perfectly on desktop Chrome, but doesn't return the countdown properly on mobile Chrome (iPhone). Checked in Safari too, same result. It's a simple jQuery countdown. The script itself runs since the innerHTML is set after all, just with not the proper data. Also, I confirmed that getTime() is also correct. What can possibly be the difference?

Desktop

Mobile

$(document).ready(function() {
  $(".cd").each(function(index, obj) {
var countDownDate = new Date(obj.getAttribute('value'));

var x = setInterval(function() {
  var now = new Date().getTime();
  var distance = countDownDate - now;

  var days = Math.floor(distance / (1000 * 60 * 60 * 24));
  var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
  var seconds = Math.floor((distance % (1000 * 60)) / 1000);

  obj.innerHTML = days + "d " + hours + "h " +
    minutes + "m " + seconds + "s ";

  if (distance < 0) {
    clearInterval(x);
    obj.innerHTML = "EXPIRED";
  }
}, 1000);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<p id="demo" class="cd" value="2018-06-10 18:00:00"></p>
<p id="demo2" class="cd" value="2018-06-11 18:00:00"></p>

Works perfectly fine on the latest Chrome on Android, version: `66.0.3359.158`. I don't have a Iphone so I cannot test it. Which version of Chrome are you using? — Ron Nabuurs, May 24 '18 at 13:25

score 0 · Accepted Answer · answered May 24 '18 at 13:31

This works in my Chrome iPhone - yours does not.

Also tested on Windows Chrome. See javascript date.parse difference in chrome and other browsers for another version for this format 2011-11-24T09:00:27+0000

$(document).ready(function() {
  $(".cd").each(function(index, obj) {
    var countDownDate = new Date(obj.getAttribute('value').replace(/-/g, "/"));

    var x = setInterval(function() {
      var now = new Date().getTime();
      var distance = countDownDate - now;

      var days = Math.floor(distance / (1000 * 60 * 60 * 24));
      var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
      var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
      var seconds = Math.floor((distance % (1000 * 60)) / 1000);

      obj.innerHTML = days + "d " + hours + "h " +
        minutes + "m " + seconds + "s ";

      if (distance < 0) {
        clearInterval(x);
        obj.innerHTML = "EXPIRED";
      }
    }, 1000);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<p id="demo" class="cd" value="2018-06-10 18:00:00"></p>
<p id="demo2" class="cd" value="2018-06-11 18:00:00"></p>

Difference between desktop and mobile Chrome

1 Answers1