Sunday, 28 July 2019

Fix elements (esp top right) to the visual viewport in chrome mobile, with very wide content?

Is there a way to fix elements (esp top right) to the visual viewport in chrome mobile?

We want to show very large images that the website visitor will zoom in and out of. The viewer needs to be able to see the whole picture and then target small areas to inspect. We will load images much wider than the screen available. Say from 1500 to 6000px wide.

As well as the above we want fixed elements for navigation in the top left and top right.

On Webkit/Safari we get the behaviour we want.

enter image description here

Chrome/Android mobile (initial load):

enter image description here

Chrome/Android mobile (zooming all the way out):

enter image description here

Chrome on mobile seems to want to fix the top right div off screen to the layout viewport. Ie the green fixed top right div is off the screen till you zoom all the way out to the whole pic.

These specs seem to suggest this is by design in Chrome.

Setting minimum-scale=1 would superficially seem to resolve this, but it disables zooming in/out which makes this NOT the solution.

Is there a solution to get Chrome to behave the same as Webkit/Safari? Solutions involving Javascript probably acceptable.



from Fix elements (esp top right) to the visual viewport in chrome mobile, with very wide content?

No comments:

Post a Comment