Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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?

like image 845
ck_ Avatar asked Oct 09 '15 13:10

ck_


1 Answers

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

like image 123
ck_ Avatar answered Sep 19 '22 14:09

ck_