I've been using a combination of JS and CSS to position images within the viewport in a way that allows them to scale and translate accurately to fill the space.
For the most part, this method works smoothly and is also able to handle browser zoom functionality quite well.
To determine the current center point in the document relative to the viewport, I rely on window.pageXOffset and window.pageYOffset along with
document.documentElement.clientWidthdocument.documentElement.clientWidthSince my site is heavily focused on images, I'm particularly mindful of how the layout behaves when visitors zoom in using methods like pinch to zoom, which differ from standard browser zoom.
Chrome behaves differently from Safari in this regard. While Chrome doesn't seem to react to pinch to zoom in terms of scroll offset and client width/height, Safari's behavior is more complex.
In Safari, the values of window.pageXOffset and window.pageYOffset do change with pinch to zoom, leading to discrepancies in calculations for centering elements relative to the viewport.
For instance, the calculation for the document-center relative to the viewport may no longer be accurate 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;
I'm looking for a way to consistently detect pinch to zoom across browsers and ensure consistent values for element placement on the screen, even after zooming in. Unfortunately, I haven't found any suitable properties to achieve this.
While I aim to support relatively current browser versions, I don't require a solution that works universally across all browsers.