Menu
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?
952
To hide the horizontal scrollbar and prevent horizontal scrolling, use overflow-x: hidden: HTML.
With the hidden value, the overflow is clipped, and the rest of the content is hidden: You can use the overflow property when you want to have better control of the layout. The overflow property specifies what happens if content overflows an element's box.
To change this, set the min-width or min-height property.” This means that a flex item with a long word won't shrink below its minimum content size. To fix this, we can either use an overflow value other than visible , or we can set min-width: 0 on the flex item.
To make sure the animation still functions as you had intended, you can remove Overflow: hidden on the Div block and instead set Overflow: hidden on the next parent up in the element hierarchy — the Section: Select the Heading's parent element (e.g., “Hero container” Div block)
An overflow issue occurs when a horizontal scrollbar unintentionally appears on a web page, allowing the user to scroll horizontally. It can be caused by different factors. Overflow with a fixed-width element that is wider than the viewport. ( Large preview )
Note: The overflow property only works for block elements with a specified height. Note: In OS X Lion (on Mac), scrollbars are hidden by default and only shown when being used (even though "overflow:scroll" is set). By default, the overflow is visible, meaning that it is not clipped and it renders outside the element's box:
I found on stack overflow a post that specifically says that iOS safari ignores overflow hidden when applied to body or html. They seem to be able to have worked around this by putting everything inside a wrapper div. Might give it a shot.
There are different ways to detect overflow, from manually scrolling to the left or right or by using JavaScript. Let’s explore the ways to detect overflow. The first way to discover an overflow issue is by scrolling the page horizontally. If you’re able to scroll, this is a warning that something is wrong with the page.
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'
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');
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
