IOS Flicker Bug When The Css Overflow:scroll Is Changed To Overflow:hidden

I'm building an app via phonegap and i want to disable the scroll of the div in the background when i swipe a menu up from the bottom of the screen; By changing overflow from scrol

Solution 1:

The flicker bug is related with GPU memory of the smartphone. The memory is limited (VRAM), and if the elements are too complex or bigger than memory, it will be exhausted. In android with CyanogenMod rom you can view the gpu processing with colors in the screen. From green (low use) to red (higher use of gpu). Demo image. But I don't know if exists a similar tool for IOS.

This is visible in all transitions of the app or when it use GPU.

Anyway you could try remove/reduce the complexity of your elements, or this from here:

Option 1

<meta name="viewport" content="width=device-width, user-scalable=no" />

Option 2 this:

.ui-page {
    -webkit-backface-visibility: hidden;
}

Option 3 this:

.ui-mobile, .ui-mobile .ui-page, .ui-mobile [data-role="page"],
.ui-mobile [data-role="dialog"], .ui-page, .ui-mobile .ui-page-active {
      overflow: hidden;
      -webkit-backface-visibility: hidden;
}

.ui-header {
    position:fixed;
    z-index:10;
    top:0;
    width:100%;
    padding: 13px 0;
    height: 15px;
}

.ui-content {
    padding-top: 57px;
    padding-bottom: 54px;
    overflow: auto;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

.ui-footer {
    position:fixed;
    z-index:10;
   bottom:0;
   width:100%;
}

Or just remove the transitions (if the problem is in transitions):

Option 4

'-webkit-transition': 'none !important',
'-moz-transition': 'none !important',
'-o-transition': 'none !important',
'-ms-transition': 'none !important',
'transition': 'none !important'

Solution 2:

Changing the value of overflow seems to make -webkit-overflow-scrolling value change from touch to auto, which causes that flickering.

You can find some information in this article : http://slytrunk.tumblr.com/post/33861403641/ios6-web-app-flickering-with . The problem remains in iOS7, but only, for what I saw, when you switch from touch to auto (not anymore from auto to touch).

None of the -webkit-backface-visibility: hidden, -webkit-transform: translate3d(0,0,0), etc. worked in my case.

As suggested in the previously mentioned the article, one workaround could be to stick with -webkit-overflow-scrolling: auto, at the cost of the nice user experience it provides.

Another would be to lock the scrolling with javascript, if your site can afford it:

function disableScroll () {
  $(element).on('touchmove', function(event){ 
    event.preventDefault(); 
  });
},

function enableScroll () {
  $(element).off('touchmove');
}

Solution 3:

The solution using -webkit-backface-visibility: hidden; which works, seems to cause performance issues if you have multiple scrollers on a page. Safari on the older ipads was hitting the CPU limits and crashing the browser.

I found a solution that works for my SPA (which could have anything up to 100 sliders on a list) by adding and removing a class with the offending style on page show & hide events.

.touchslide {
    -webkit-overflow-scrolling:touch;
}

(Using jQuery style pseudo code) when you leave the page, remove the class

selector.removeClass("touchslide");

Then on page load:

   selector.addClass("touchslide");
   selector.scrollLeft(0);

You need to trigger the scroll event on iOS, so target the html object and add to scrollLeft as the first scroll will not have the inertia effect.