I’m using JS and CSS to position images inside the viewport (to scale and translate them correctly so they fill it).

In general this works well and it can also handle browser zoom gracefully.

I’m using window.pageXOffset and window.pageYOffset in combination with document.documentElement.clientWidth and document.documentElement.clientWidth to determine the current center point in the document (relative to the viewport) so I know where to translate the image to.

Since this is an image focused site I also want to pay particular attention to how I handle things when visitors zoom in using pinch to zoom (or similar methods) which are not the same as using browser zoom.

Chrome seems to completely ignore pinch to zoom. Both the scroll offset and the client width and height actually don’t change at all when you pinch to zoom in. As such the behavior is ok, if a bit wonky (none of my calculations are thrown off, at least).

However, Safari is a different beast: window.pageXOffset and window.pageYOffset react to the pinch to zoom (e.g. pageXOffset might now be 150 instead of 0 since that’s now the actual scroll distance to the left edge).

However, in Safari both document.documentElement.clientWidth and document.documentElement.clientWidth are completely unchanged, meaning if I now calculate the center of the document relative to the viewport the numbers are off and both the transformation as well as the scaling doesn’t produce correct results.

Here is an example calculation of the center of the document relative to the viewport that doesn’t work anymore when pinch to zoomed in in Safari:

var scrollLeft = window.pageXOffset;
var scrollTop = window.pageYOffset;

var viewportWidth = document.documentElement.clientWidth;
var viewportHeight = document.documentElement.clientHeight;

var viewportCenterX = scrollLeft + viewportWidth / 2;
var viewportCenterY = scrollTop + viewportHeight / 2;

Is there a way to get consistent detection of pinch to zoom and also consistent values for placing elements on the screen, even if someone zoomed in? I couldn’t find any fitting properties.

(My general aim is to support only relatively current versions of all browsers. I don’t need a solution that works absolutely everywhere.)