Geek Answers Handbook

Android CSS position: fixed after device rotation

I have a very unusual error that appears on my Android 4.0 in Galaxy Note. Some friends see the same thing on their Galaxy S3. I simplified my code as follows:

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta name="viewport" content="width=device-width, maximum-scale=1.0,initial-scale=1.0, user-scalable=no" /> <style type="text/css"> #movieplayer {width:100%; position:fixed; top:0px; left:0px; right:0px; bottom:0; background:yellow; z-index: 90;} .player, .project-info {width:100%} #movieplayer .short-info {width:100%;background:green;display:block;position:relative;} </style> </head> <body class="works"> <div id="global-container"> <div id="movieplayer"> <div class="player"> <div class="project-info movie"> <div class="short-info jspScrollable"> <div class="container"> hello </div> </div> </div> </div> </div> </div> </body> </html>

When you first load this page in PORTRAIT, you should see a green bar on a yellow background. They both fill the screen width 100%. When you rotate the phone to landscape, the yellow continues to fill the rest of the screen, but the green bar does not fill the remaining width. Why is this?

I use #movieplayer {position: fixed;} here because in my real code, I rely on this to do some other things. Therefore, I cannot use the position: absolute.

+7
source share
2 answers

Ok, I managed to crack the solution together. I have jquery installed and then I did

 $('.short-info').css('position','absolute'); setTimeout("$('.short-info').css('position','');", 0);

It is ugly, but it works.

+1
source

This problem seems to be a bug in some versions of the android browser.

Many items in a fixed-position container are not invited to recalculate their width (during reflow ) as a result of a resize event.

Your solution works as it is one of several ways to make this recalculation happen.

Oddly enough, we found that any landscape media query in css fixes it for us. (tested on Galaxy S3):

 @media screen and (orientation: landscape){ .doesnt-exist { background:red; } }

Related links: Android issue 27959 Problem with Android (dup) 25610

+9
source

More articles:


All Articles