Jankiness with Chrome mobile's autohiding toolbar and full-height divs

Question

I have a div that is resized to be at the full height of the viewport on load as well as on resize. The problem that I am having is that on Google Chrome for iOS (I haven't checked Android, but I can imagine that it displays the same erratic behaviours) if I scroll down, as usual the address/tab bar scrolls up. And as it does, it fires resize events. When that happens, the div and its contents jitter and cause scrolling to be come sluggish, as well as causing other oddities with the div below.

JSFiddle: http://jsfiddle.net/mseymour/9PEC4/

score 2 · Accepted Answer · edited May 23 '17 at 12:28

I would suggest setting the height of the .home-hero only once on an smartphone, by either checking the height of the window (could cause problems, it's inconstant) or user agent sniffing.

Here are some links:
http://detectmobilebrowsers.com/
What is the best way to detect a mobile device in jQuery?
Detecting a mobile browser

Then set the height only once since on a mobile you cannot really resize the window, and you don't need to resize it on every resize event.

if (isMobile) {
    fullScreenSlide(); // resize once
} else {
   setResizeEvent(); // Set the event for multiple resizes
}

function setResizeEvent() {
    $(window).on("resize", function () {
        fullScreenSlide();
    }).resize();    
}

function fullScreenSlide () {
  var browserheight = Math.round($(window).height());
  $('.home-hero').height(browserheight);
}

You want to do as little "things" on a smartphone since smartphones are really slow performance wise compared to a desktop

Jankiness with Chrome mobile's autohiding toolbar and full-height divs

1 Answers1