Menu
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
682
The -webkit-overflow-scrolling CSS property controls whether or not touch devices use momentum-based scrolling for a given element.
This means that you cannot use webkit-overflow-scrolling:touch in PhoneGap apps, and for most other use cases at this time. Instead you can use overflow: scroll, but that's only supported in Android 3.0+, so use iScroll, or the many other alternatives out there.
The solution I found was to remove all the CSS that tricks the browser into using the GPU: -webkit-transform: translateZ(0px); -webkit-transform: translate3d(0,0,0); -webkit-perspective: 1000; By doing this, the '-webkit-overflow-scrolling: touch;' can still be included and still function as normal.
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.
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); } 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.
29
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
