ios9 mobile safari landscape css bug with position:absolute bottom:0

Question

I cannot seem to find the workaround for this.

On ios9 in mobile safari, if a webapp uses position:absolute and bottom:0 for the content area to cover the whole screen, when in landscape mode the safari navigation bar will cover the bottom of the content and you cannot scroll past it - it does NOT block in portrait.

1. portrait mode is fine, even when navigation bar is there
2. it's not an orientation change bug, happens if page is started in landscape
3. bug does NOT happen if the webpage is added to the homescreen, works perfect in landscape and content is visible (because navigation is not there)

So why does safari get bottom:0 correct in portrait but not landscape?

Reeta

Can't believe no-ones run into this yet - good old Safari! – Radicand

Answer 1

setting position:fixed on the html element magically fixed this

html { position:fixed; width:100%; height:100%; overflow:hidden; }

not sure why but must be a rendering bug that fixed works around

for some reason fixed also change the font size in landscape but I can work around that too

Reeta

That worked for me and in our situation. Even though it might not work for others. – Ignominy

Great solution! Was stuck with this several hours. – Verlie

Answer 2

I had same problem, on orientation change if its in landscape mode, change your viewport meta to:

width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no

I'm doing this by simply finding $('meta[name="viewport"]') and replacing its content.

Exclosure