Recently [some browsers](https://googlechrome.github.io/samples/event-timestamp/) started to use [High Resolution](https://developer.mozilla.org/en-US/docs/Web/API/DOMHighResTimeStamp) [time stamps](https://developer.mozilla.org/en-US/docs/Web/API/Event/timeStamp) for their [events](https://developer.mozilla.org/en-US/docs/Web/API/Event). One of the major difference with the previous approach is that this duration isn't relative to the system epoch but to [some "time origin"](https://w3c.github.io/hr-time/#dfn-time-origin) (most of the time approximately the time the document was loaded).

The issue is that I cannot find any reliable way to check if the browser is using high res timestamps or the previous approach.

It is not a problem if only event timestamps are compared, but if one wants to compare event timestamps with handmade timestamps, one needs to know if they should use `Date.now()` (relative to epoch) or `precision.now()` (relative to the time origin).

For example, while safari mobile supports the performance api, some versions (e.g. the one in iOS 11.1) hasn't switched their events to High Resolution Time stamps yet.
As a result, the following snippet produces nonsensically huge values for `difference` because `start` ends being a high res time stamps but not the events' timestamps.

```js
const now = performance ? () => performance.now() : () => Date.now();

let start;

const update = e => {
  if(e) e.preventDefault();
  document.querySelector('#start').innerHTML = start;
  document.querySelector('#event').innerHTML = e ? e.timeStamp : '';
  document.querySelector('#diff').innerHTML = e ? e.timeStamp - start : '';
};

const reset = () => {
  start = now();
  update();
}

reset();

document.querySelector('#reset').addEventListener('click', reset);
document.querySelector('#pad').addEventListener('mousemove', update);
document.querySelector('#pad').addEventListener('touchmove', update);
```

```css
#pad {
  background-color: #C9DBFA;
  border: 1px solid #778294;
  border-radius: 10px;
  width: 500px;
  height: 100px;
  color: #575E6C;
  padding: .5em .75em;
}

#reset {
  margin: 1em 0;
}
```

```html
<div id="pad">
  <strong>start time:</strong> <span id="start"></span>
  <br/>
  <strong>event time:</strong> <span id="event"></span>
  <br/>
  <strong>difference:</strong> <span id="diff"></span>
</div>
<button id="reset">reset</button>
```

Screenshot from an iPad (iOS 11.1):
[![enter image description here](https://i.stack.imgur.com/KpPOC.jpg)](https://i.stack.imgur.com/KpPOC.jpg)