7

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.

John
  • 32,403
  • 80
  • 251
  • 422

2 Answers2

9

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

Yoni Shalom
  • 489
  • 4
  • 11
1

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.

John
  • 32,403
  • 80
  • 251
  • 422