New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
iOS5 Safari: position: relative elements disappear during scroll when using -webkit-overflow-scrolling: touch #8
Comments
We ran into this one as well. This (stylus) seemed to fix the issue for all of the instances we had:
|
Just ran into this bug. Setting |
Do not try applying the transform to the scrollable element itself as a time saver. I've seen this trigger a device defect where the part of the screen that had the element stops responding to touches even after page nav. |
As can be seen in scottjehl/Device-Bugs#8 a combination of "-webkit-overflow-scrolling:touch", "position:relative" and "overflow:auto" can have unexpected behavior on iOS. The issue solved here is that writing in a form view inside a modal in iOS (at least version 10.3) would make the whole form body invisible until edition is ended. The fix is adding a CSS which avoid the iOS bug. opw-774396 closes odoo#20314
As can be seen in scottjehl/Device-Bugs#8 a combination of "-webkit-overflow-scrolling:touch", "position:relative" and "overflow:auto" can have unexpected behavior on iOS. The issue solved here is that writing in a form view inside a modal in iOS (at least version 10.3) would make the whole form body invisible until edition is ended. This commit fixes this by adding a CSS rule which avoid the iOS bug. opw-774396 closes #20314
Ran to this bug on iOS 11.2 (iPhone 6, xCode's simulator). Checked it on iOS 9.3 - everything works correctly. Does anyone have a solution to this problem ? |
I found a solution. It's stupid, but it works ! Adding animated gif (1px X 1px) on page fix this problem. |
@Amansky Hey, can you please elaborate a bit more what you did? I assume animated gif triggers gpu more and thus divs do not disappear. I am running into similar issue right now and banging my head on wall for more than 3 days. Did you add 1x1 gif to div that has overflow touch or in root ( body ) ? |
@vkozinec I added 1x1 gif not in root, but to a static part of page. HTML code looks like this: |
@Amansky Thank you. I tested for example with 1 second animated gif and content really appeared every 1 second while coming from offscreen, it's obviously related to screen update/refresh from that gif, so i put .1s animation and it works. Btw. while researching this problem a bit more, I stumble upon some other things. This bug could be related to using UIWebView in iOS. Changing to WKWebView could resolve this issue, still didn't test it, but I saw it fixes issue where momentum scrolling stops JS until scroll stops. I will test this put results here so at least other people can fix their problems faster |
I had the same issue while working on my site. I dynamically generate an overlay which contains scrollable content, all with JS. So I had a class on the overlay template
The strange thing was the scroll wouldn't work, then if I closed the overlay with JS which deleted it. You then activate the overlay the same way by clicking a gallery item. The overlay pops up and the scroll works. Though it's recreated it and generated it from scratch again. So I messed around a bit and found this gory HACK if you're doing everything with JS:
I tried 10 and 100 and it didn't work, but it seems to work at 500 and I got bored trying to find out how low I could go. It also may depend on the browser and mobile with the rendering as well. |
I have experienced this but not only on elements with position relative. My contents are dynamic and I am using a inferno-js on the frontend. The site I'm developing doesn't scroll smoothly on ios. This is because my contents has a wrapper and the wrapper is set to 'Till I came across the Thanks to @tbassetto's comment. That solved the problem for me. In my case, I applied @supports (-webkit-overflow-scrolling: touch) {
transform: translate3d(0, 0, 0);
} Seriously, what's the deal with this. Why do they have to make us use their dirty hacks just to make our sites scrollable. Now the problem I have is when I show a modal overlay that has the following specs:
When I scroll. The body scrolls. Like seriously, that modal has a higher z-index than the content below it. I expect that to block scroll events on the content below it. |
@aprilmintacpineda i am running with same issue |
resolved this for me, without having to set transform: translate |
Summary:
In iOS5 Safari:
position: relative
(or possibly all positioned) child elements occasionally disappear while scrolling an element that uses-webkit-overflow-scrolling: touch
. They seem to consistently reappear after scroll stops. This seems to occur most with elements that are outside of the overflow region at scroll start.Platforms:
How to reproduce:
-webkit-overflow-scrolling: touch
on an element that hasposition: relative
child elements and a lot of contentReduced Example:
http://jsbin.com/izimaf/3/
Bug Tracker ticket(s):
Workarounds:
The text was updated successfully, but these errors were encountered: