Mobile Safari start scrolling display issue

Let get right to the issue. iOS safari does re-size the view until navigation bar gets to It’s minimal height. Hence does not scrolling at start of scroll gesture. And it does not trigger onresize event while re-sizing to get navigation bar smaller.
This is clearly an issue. I propose two solution for it.

1. Turn off browser scroll

Actually i mean do not put content more that screen size. Which results no scroll feature.

2. Set your content height more than `window.innerHeight`.

Here’s the code to calculate it somewhat accurately.

// compats holds data about compatibility stuff
compats.start_with_resize_onscroll =
    ua.indexOf("Safari") != -1 && ua.indexOf("Mobile") != -1;
compats.start_with_resize_onscroll_CriOS = // Chrome iOS browser
    compats.start_with_resize_onscroll && ua.indexOf("CriOS") != -1;
compats.start_with_resize_onscroll_full_window_height = function() {
  var least_nav_height =
  compats.start_with_resize_onscroll_CriOS ? 0 : 38;
    return window.screen.width - least_nav_height;
    return window.screen.height - least_nav_height;

You might also struggling with another issue related to display fixed position contents. Click here

1 comment / Add your comment below

Leave a Reply

Your email address will not be published. Required fields are marked *