iOS 8 mobile safari wrong timestamp on touch events

Question

I read a lot about scrolling issues within iOS 8 and disabled Javascript. But I am facing a strange behavoir which seems to me like an other bug.

I have a hyprid web app running within cordova phonegap. Everything works fine, and I do not use scroll listeners. Somehow, after some pushing the app into the background and bring to foreground again (So far I was not able to find out why it happens), all touch event timestamps are delayed for 10 seconds.

I use sencha touch framework which is captureing this timestamp to handle functionality.

Would be nice to hear if someone else facing same behavior or already got a solution for this. Meanwhile I will do more testing and update this post with more detailed information.

Thanks

UPDATE:

document.addEventListener('touchstart', function(e){
   console.log('touchdelay: ' + (Date.now() - e.timeStamp));
}, false);

//returns:
//touchdelay: 11699655

So this test I did just now tells me that the event happened more than 3 hours ago.

UPDATE2: I am able to reproduce the error on iPhone 5s by opening mobile safari, loading any page, pushing the phone into sleep mode, waiting for 15 seconds, open safari.

I opened a bug report on apple's bug system.

Answer 1

This question may is no more up to date, so I suggest reading the following articles regarding this issue.

https://w3c.github.io/hr-time/#time-origin

According to the W3C's definition all major browsers are may going to change the timestamp behavior. So did chrome already from version 49 on. The timestamp no longer represents the epoch but the point of time you last refreshed your site:

https://developers.google.com/web/updates/2016/01/high-res-timestamps?hl=en

So be careful believing in event timeStamp is the epoch time.

For being compatible with both you may add a similar snippet before event handlers are added for your app:

var dateNowAtLoad = Date.now(); 
ontouchmove = (e) => {
    if (e.timeStamp > dateNowAtLoad) {
          // epoch timestamp -> old path
      } else {
          // high-res timestamp -> new path
      }
}

or checkout this related plugin:

https://github.com/majido/high-resolution-timestamp-polyfill/blob/master/translate-timeStamp.js