CSS3 property webkit-overflow-scrolling:touch ERRO

Question

iOS 5 released web designers a new property -webkit-overflow-scrolling:touch that uses the iOS devices hardware accelerator to provide native scrolling for a scrollable div.

When implemented on our site in development it does work but not well. I believe there may be a CSS issue hence I ask here.

The following fiddle will show you it working perfectly

If you pop over to our site in development you will find the same panel under facilities tab but on iOS although the scrolling is perfect the overflowed section is not shown with pictures literarily chopped in two.

http://www.golfbrowser.com/courses/mill-ride/

I have no idea how to fix this http://www.golfbrowser.com/photo.PNG

Answer 1

The bug still lives in iOS 6. If your issue is related to position: relative, you might solve the issue be setting z-index: 1 temporarily via JS. -webkit-transform: translate(...) did not work with position: relative in my case.

Answer 2

I deeply investigated this bug, I also created a jsfiddle and submitted it to Apple in a bug report. Please see: iOS5 Images disappear when scrolling with webkit-overflow-scrolling: touch As soon as Apple replies to me, I'll report it on that topic so you can stay up-to-date about this very annoying bug

Answer 3

What a bugger they let loose here. Tried all manner of workarounds until I finally found the only property needed by for elements to be properly rendered in a -webkit-overflow-scrolling:touch div: position: static

Relative and absolute positioned elements are always cut off on the boundary, and completely missing (except for empty space) outside of it. If you change the position property dynamically, from static to absolute, only the visible portion of the scrollable div viewport stays rendered, wherever the offset happens to be.

Answer 4

As @relluf pointed out, applying 3D transitions on the relative element fixes the bug. However, I investigated it a bit further and it seems that applying -webkit-transform: translateZ(0px) works too (this is what Google does on gmaps map container) and it does not need to be on the relatively positioned element, just the direct descendant of the scrollable element.

So if you don't want to manually keep a list of all the places where the fix is needed, you just might do:

element {
    -webkit-overflow-scrolling: touch;
}

element > * {
    -webkit-transform: translateZ(0px);
}

Answer 5

I also experienced the problem where overflow scroll with -webkit-overlfow-scrolling set to touch resulted in redraw problems with positioned elements. In my case I had a list where the individual items had relative positioning so that I could use positioning on their child elements. With the above CSS on iOS 5, when the user scrolled hidden content into view, there was a momentary delay before it redrew the screen to review the elements. It was really annoying. Fortunately I discover that if I gave the parent node position relative as well, this was resolved.

Answer 6

I tried some different solutions, seemed not work perfectly in my case.

Finally I've found a way works fine with jQuery:

Apply -webkit-overflow-scrolling property every time when you touch up.

*At first I Applied Also -webkit-overflow-scrolling:auto when TouchDown, to disable iOS rendering. But it made Page blink. So I dropped it away, then works fine surprisingly!

Check lines below, hope it helps:

<!--                                                                     

                                                        
            

查看更多

0人赞 添加讨论(0) 举报