Page changing size on iOS when zooming

Question

I have been having some problems with iOS (both Safari and Chrome for iOS). When the user zooms the page seems to be changing size (it is also triggering the resize javascript event dozens of times) which is messing up some of my content that is positioned using javascript. I can't fix that by binding the resize event because it's called way too many times and I have no way to know which one was the last.

I have tried setting numerous options on the viewport with no luck (width, initial-scale, maximum-scale, minimum-scale).

I have one fixed position div with fixed top, right, left and top. There are several absolute divs inside it and they have sizes and positions set in %.

It seems the page is actually changing sizes because when I zoom out after I have zoomed in I see empty borders to the right and bottom of the screen. I want to prevent this from happening.

Answer 1

I have found the problem. The page was not resizing itself, the fixed positioned elements were. It turns out the fixed positioning follows the view of the user if he zooms in. The only solution I have found is to change all my fixed positioning to absolute positioning (which in my case is going to be a pain).

I have also found that since the resize event is bound to window the view does change when zooming and so the resize function is triggered. The resize event does not work on other elements (in my case what I actually need is to see the resize on the body).