CSS3 property webkit-overflow-scrolling: touch ERROR

Question

iOS 5 has released web designers a new property -webkit-overflow-scrolling:touch , which uses the hardware accelerator of iOS devices to provide scroll scrolling for a scrollable div.

When implemented on our site in development, it works, but not very well. I believe that there might be a problem with CSS, so I ask here.

The following fiddle will show you that it works great

If you go to our website in development, you will find the same panel on the Tools tab, but on iOS, although the scrolling is perfect, the overflowed section does not appear with pictures literally split into two parts.

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

I do not know how to fix it http://www.golfbrowser.com/photo.PNG

Answer 1

As @relluf noted, applying 3D transitions on a relative element corrects the error. However, I explored it a bit further, and it seems that using -webkit-transform: translateZ(0px) also works (this is what Google does in the gmaps map container) and it doesn’t need to be on a relatively positioned element, just direct descendant of a scrollable element.

So, if you do not want to manually save a list of all the places where a correction is required, you can simply:

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

Answer 2

What a scarecrow they let in here. I tried all the workarounds until I found the only property needed to correctly display elements in -webkit-overflow-scrolling:touch div: position: static

Relative and absolute positioned elements are always cut off at the border and completely absent (with the exception of empty space) outside it. If you change the position property dynamically, from static to absolute, only the visible part of the viewed viewport scrolls anywhere where the offset is.

Answer 3

I ran into this error. I fixed it by applying the following css to the parent elements:

 -webkit-transform: translate3d(0, 0, 0); 

However, I noticed that this slows down the rendering and may select other input elements than are required when the scrolled input element scrolls to the center of the view (via Safari / iOS).

Answer 4

I thoroughly investigated this error, I also created jsfiddle and sent it to Apple in the error report. Take a look: iOS5. When scrolling by scrolling webkit images, the images go through: tap As soon as Apple answers me, I will let you know about this topic so that you can stay informed about this very annoying error

Answer 5

I also ran into a problem when overflow overflow with a -webkit-overlfow-scrolling touch-tap led to redraw problems with positioned elements. In my case, I had a list in which the individual elements had relative positioning, so that I could use positioning for my children. With the above CSS on iOS 5, when the user was viewing hidden content in the view, there was an instant delay before he redrawed the screen to view the elements. It was very unpleasant. Fortunately, I found that if I provided the parent position of the node as relative, this was allowed.

Answer 6

The error still persists in iOS 6. If your problem is related to position: relative , you can solve the problem by temporarily setting z-index: 1 via JS. -webkit-transform: translate(...) did not work with position: relative in my case.

Answer 7

In iOS, when an element inside an element with -webkit-overflow-scrolling: touch set absolutely (or fixed ) relative to the element outside the scroll container, the element is displayed only once, and the rendering is not updated as the element scrolls. HTML example:

 <div class="relative-to-me"> <div class="scrollable"> <div class="absolutely-positioned"> </div> </div> </div> 

If you force redirect by changing the CSS property (for example, in the inspector), you can see that the positioning of the element is re-mapped to the correct location. I suspect this is the result of some performance characteristics to optimize scroll performance.

The solution to this problem is to set will-change: transform to an absolutely (or fixed) positioned element.

 .absolutely-positioned { will-change: transform; } 

Answer 8

I tried several different solutions, it did not seem to work perfectly in my case.

Finally, I found a way to work fine with jQuery:

Apply the -webkit-overflow-scroll property every time you touch.

* At first, I also used -webkit-overflow-scrolling: auto when TouchDown to disable iOS rendering. But that made the page blink. So I threw it away and then worked wonderfully surprisingly!

Check the lines below, hope this helps:

 <!-- 🍉 JQuery Functions--> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script type="text/javascript"> //🍋 Apply -webkit-overflow-scrolling in Every TouchEnd $(document).on('click touchend', function(event) { $("#TestDIV").css({"-webkit-overflow-scrolling":"touch"}); }); </script> <!-- 🍉 html Elements & Style --> <div id="TestDIV"> <div class="Element"></div> <div class="Element"></div> <div class="Element"></div> <div class="Element"></div> <div class="Element"></div> </div> <style> #TestDIV{ white-space: nowrap; overflow-x: scroll; -webkit-overflow-scrolling:touch; } #TestDIV .Element{ width:300px; height:300px; margin: 2px; background-color: gray; display: inline-block; } #TestDIV .Element:nth-child(odd){ background-color: whitesmoke; } </style>