CSS "position:fixed": mobile zoom

Question

I'm trying to solve an issue with css "position:fixed" property on mobile browsers. I have a fixed div:

<div id="logo">
...other content here...
</div>

with css:

#logo{
    position: fixed;
    -webkit-backface-visibility: hidden;
    bottom: 100px;
    right: 0px;
    width: 32px;
    height: 32px;
}

So, usually the behaviour is exactly the desired one, with the div position always on the bottom right of the window, indipendently of the scroll position. My issue is that on mobile browsers, when the users zoom the page, after a certain zoom level the div position is wrong (sometimes the div disappear out of the window).

I know that fixed position is not well supported on mobile browsers, but I wonder if there is some workaround. I tried with this js code onScroll event:

window.addEventListener('scroll', function(e){
    drag.style['-webkit-transform'] = 'scale(' +window.innerWidth/document.documentElement.clientWidth + ')';\\I want to avoid zoom on this element
    var r = logo.getBoundingClientRect();
    var w = window.innerWidth;
    var h = window.innerHeight;
    if(r.right != w){
        rOff = r.right - w;
        logo.style.right = rOff;
    }
    if(r.top+132 != h){\
        tOff = r.top + 132 - h;
        logo.style.bottom = tOff;
    }
});

Unfortunately, the code seems to return the wrong position.

Does anyone have any tip?

Solution 1

Ok, that's how I solved the issue...I hope that could help anyone to simulate fixed position on iOS devices.

1. I switched the position from fixed to absolute;
2. Attach to window a listener to get the new position when the page is scrolled or zoomed, setting window.onscroll and window.onresize events with the following function:

function position() {
    drag.style.left = window.innerWidth + window.pageXOffset - 32 + 'px';
    drag.style.top = window.innerHeight + window.pageYOffset - 132 + 'px';
}

Solution 2

Do you want to catch if zoom is active?

There's no window.onZoom listener, but you can read this thread: Catch browser's "zoom" event in JavaScript

and this answer: https://stackoverflow.com/a/995967/3616853

There's no way to actively detect if there's a zoom. I found a good entry here on how you can attempt to implement it. I’ve found two ways of detecting the zoom level. One way to detect zoom level changes relies on the fact that percentage values are not zoomed. A percentage value is relative to the viewport width, and thus unaffected by page zoom. If you insert two elements, one with a position in percentages, and one with the same position in pixels, they’ll move apart when the page is zoomed. Find the ratio between the positions of both elements and you’ve got the zoom level. See test case. http://web.archive.org/web/20080723161031/http://novemberborn.net/javascript/page-zoom-ff3 You could also do it using the tools of the above post. The problem is you're more or less making educated guesses on whether or not the page has zoomed. This will work better in some browsers than other. There's no way to tell if the page is zoomed if they load your page while zoomed.

Comments

[toniedzwiedz]

Please provide the relevant information in the answer itself. The way it is now, it will become useless as soon as the links go dead.

[user3098549]

I don't need to catch if zoom is active, I've already catched the event. I want to know how to get the right offset for my element according to zoom scale factor. It seems that the issue only happens on iOS devices with zoom>1.4X

[grubino]

@user3098549 you can create an separated style sheet for specific devices, and handle the offset right there... or is not an option? <link rel="stylesheet" media="only screen and (max-device-width: 1024px)" href="../ipad.css" type="text/css" />

[user3098549]

This is not the issue I want to solve...my problem is about zoom, not about device screen size

[lowtechsun]

Switching from fixed to absolute on zoom is the way the go. Like this you leave device or browser zoom as the user wants to use it, have the website accessible for users who want to use the zoom and you don't have to worry about zoom level or future browser or device changes regarding zoom functionality.