Skip to content

Android ICS Browser: buttons in fixed toolbar cause bar to partially disappear in landscape #4325

Closed
adammessinger opened this Issue May 9, 2012 · 5 comments
@adammessinger

After an orientation change from portrait to landscape in Android Browser on Android 4.0.x ("Ice Cream Sandwich"), fixed toolbars containing buttons (link buttons in my test cases) will have most of their right side become invisible.

Test cases:

Screen shot of page after orientation change to landscape mode (tested with a Galaxy Nexus running Android 4.0.2): http://twitpic.com/9j93kl

Scrolling the test pages above often fixes the problem, but I can't reproduce that behavior in my app. I think it may have something to do with the "Edit in jsbin" link in the top right corner of those pages.

@adammessinger

As seen here, this issue also affects fixed footers: http://jsbin.com/omacox/192

The same fix (below) addresses both and can be tested here: http://jsbin.com/omacox/193

$(window).on('orientationchange', function(event) {
  if (event.orientation === 'landscape') {
    setTimeout(function() {
      var $bar = $('.ui-header-fixed, .ui-footer-fixed');
      $bar.css('visibility', 'hidden');
      // take measurement to force application of visibility change:
      $bar[0].offsetHeight;
      // make toolbar visible again:
      $bar.css('visibility', 'visible');
    }, 1000);
  }
});

Basically, I'm forcing the browser to do a repaint 1 second after an orientation change to landscape. I arrived at the length of the delay by trial and error. Anything shorter than about 500 milliseconds wasn't always long enough for the browser to finish reflowing page content and for the bug to express on my Galaxy Nexus. I wanted to give a little extra time for older, slower phones that will get the ICS upgrade this year, but 750 ms didn't seem to work at all for some reason. 1000 ms works reliably and gives the extra time for older phones.

I've also tested the fix in the following browsers and found that it neither introduced new problems nor perceptibly slowed down reflow after orientation changes:

  • Android Browser for Android 2.3.4
  • Mobile Safari on iOS 5.1
  • Mobile Firefox 10.0.4
  • Chrome for Android beta
  • Opera Mobile 12
@toddparker

@adammessinger - thanks for the detailed report and suggested fix. We'll give this a look.

@gseguin gseguin was assigned May 13, 2012
@adammessinger

Thanks for looking into this. If it helps, here's an updated version of my fix suggestion. This only makes style changes to toolbars on the currently active page and doesn't throw an error on pages with no fixed toolbars:

$(document).on('pageinit', '.ui-page, .ui-dialog', function() {
  var $cur_page = $(this);

  $(window).on('orientationchange', function(event) {
    if (event.orientation === 'landscape') {
      setTimeout(function() {
        var $fixed_bars = $cur_page.find('.ui-header-fixed, .ui-footer-fixed');
        if ($fixed_bars.length) {
          $fixed_bars.css('visibility', 'hidden');
          // take measurement to force application of visibility change:
          $fixed_bars[0].offsetHeight;
          // make toolbar visible again:
          $fixed_bars.css('visibility', 'visible');
        }
      }, 1000);
    }
  });
});
@arschmitz
jQuery Foundation member

I can't reproduce this with latest with galaxy nexus with 4.0 im going to say this is fixed and latest and IMO should be closed

@jaspermdegroot
jQuery Foundation member

@adammessinger

I think it has been fixed by Android ( @arschmitz tested this on Android 4.0.4). Closing.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.