All geek questions in one place

Single finger scrolling in Safari not displaying html until scrolling is complete

In a mobile web application, I have a div that can be scrolled with the new fantasy -webkit-overflow-scrolling: touch. The only problem is that the content is only displayed when scrolling is complete. Is there a way to make Mobile Safari (and possibly other mobile browsers like Android on Android) display html while scrolling one finger?

.layer-content { position: absolute; top: 112px; bottom: 0; width: 100%; background: #e6e6e6; overflow-y: scroll; -webkit-overflow-scrolling: touch; }
+6
source share
4 answers

Not really. This is how the iPhone works. If you scroll through the scroll, all resources are used to make the scroll very smooth, due to the lack of new parts. Perhaps you can fool the browser by thinking that this layer is larger by increasing its size and adding a layer on top of the part that you do not want to show, but this does not work for all layouts. I will just leave it. Users are used for this, since regular pages have the same "rendering problem".

+3
source

You can get around this using hardware acceleration. Try adding the following CSS to the elements inside .layer-content :

 -webkit-transform: translate3d(0,0,0);
+4
source

Position: absolute messing around with rendering. Mobile Safari will not display items that do not have a standard positioning value until scrolling stops.

If the position is automatic (the default value), Mobile Safari will display the item when scrolling.

+1
source

I'm pretty damn sure I just solved this:

 overflow-y: auto;

Add this to your scroll element.

(Presumably just overflow: auto; will work also depending on your needs.)

0
source

Source: https://habr.com/ru/post/902528/

More articles:


All Articles