Menu
I have a very unusual bug that appears on my Android 4.0 on Galaxy Note. Some friends see the same on their Galaxy S3. I simplified my code to the following:
<!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 up this page in PORTRAIT, you should see a green bar on top of 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 fails to fill the remaining width. Why is this?
I am using #movieplayer{position:fixed;} here because in my real code, I rely on that to do some other stuff. So I can't use position:absolute.
385
An element with position: fixed; is positioned relative to the viewport, which means it always stays in the same place even if the page is scrolled. The top, right, bottom, and left properties are used to position the element. A fixed element does not leave a gap in the page where it would normally have been located.
Absolute. Position absolute takes the document out of the document flow. This means that it no longer takes up any space like what static and relative does. When position absolute is used on an element, it is positioned absolutely with reference to the closest parent that has a position relative value.
2) CSS Fixed Positioning The fixed positioning property helps to put the text fixed on the browser. This fixed test is positioned relative to the browser window, and doesn't move even you scroll the window.
This issue seems like a bug in certain versions of the android browser.
The set of elements under the fixed-position container aren't asked to recalculate their width (during reflow) as a result of the resize event.
Your solution works, as it is one of several ways to force this recalculation to occur.
Oddly enough, we've found that any landscape-specific 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 Android Issue (dup) 25610
183
OK, I was able to hack a solution together. I have jquery installed, and then I did a
$('.short-info').css('position','absolute');
setTimeout("$('.short-info').css('position','');", 0);
This is ugly, but it works.
33
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With