IOS flicker bug when the css overflow:scroll is changed to overflow:hidden

Question

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 scroll to hidden why that menu swipe is active works, but it causes the screen to flicker.

Anyone know any hack arounds to stop a div flickering when the overflow propery is changed?

Instead of setting overflow hidden, perhaps you can remove the hidden content from the DOM altogether? It sounds like the device is struggling because you have too much on the page, so making the page smaller would be my first approach. — Abhi Beckert, Jul 19 '13 at 14:09
I'm the having the same issue, changing the overflow property from scroll to hidden the whole div "flashes" on ipad. Did you find a solution to this? — iamalismith, Jun 09 '14 at 12:55

score 6 · Answer 1 · edited May 23 '17 at 12:25

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'

You can debug GPU issues in the iOS Simulator but not on the device itself. It's under "Xcode -> open developer tool -> more developer tools..." and search for "graphics" (the site is down right now so I'm not sure exactly what the name is). You could also probably run it in the Instruments tool, which will tell you how exactly how many bytes of VRAM you're using at each microsecond of your app's life time. I'm not sure how to get a phone gap app to run in Instruments though. — Abhi Beckert, Jul 19 '13 at 14:06

score 5 · Answer 2 · answered Jul 23 '14 at 09:47

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');
}

Aaron · Answer 3 · 2014-08-15T11:46:37.277

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.

IOS flicker bug when the css overflow:scroll is changed to overflow:hidden

3 Answers3

Linked