albertogasparin/Optiscroll

Nested scrolling is jerky on iOS (iPad)

Overpowered opened this issue · 4 comments

Overpowered commented

Sry, its me again ^^.
I had to find out that scrolling inside a nested div is a bit tricky on iOS.

As roundup:
overflow: auto; for the nested div - you can scroll inside the div but without a scrollbar and the scrolling isnt smooth.

-webkit-overflow-scrolling: touch; for the nested div - now you have a scrollbar and a smooth scrolling too.

BUT in both situations the script seemes not to work perfect together with this iOS scrolling settings, cause the divs start flickering at fast scrolling and on reaching the end or top of the nested div.

albertogasparin commented

What do you mean by "nested div"? Do you mean nested scroll?
Optiscroll automatically adds the -webkit-overflow-scrolling: touch; for you to the scrollable content: are you trying to create another scrollable section inside an Optiscroll element and not using Optiscroll there?

Can you create a codepen/codesnadbox/... to share the code so I can see?

Overpowered commented

You are right, I mean "nested scrolling". I have tried to create a fiddle example, but it semmes to be that I cant execute your js from github by just linking it?

My try: https://jsfiddle.net/h78e2nom/1

albertogasparin commented

There is no CDN version available so you have to manually add it to the project. I don't know how to create multiple files with jsfiddle so I've created this for you: https://codesandbox.io/s/jolly-goldwasser-jwl3e

I have the impression that you forgot to add the optiscroll class to the scrollable elements. Both overflow: auto and -webkit-overflow-scrolling: touch are handled by Optiscroll if you add that class, so there is no need for you to add those styles manually to your divs.

Overpowered commented

Thx for your test-example. You are right, your script works fine. It was really heavy to figure out what cause the flickering - I founde out that iOS seemes to have trouble with an transition effect inside my nested scrolling, or there is an transition doubling with an other external plugin - I am not absolutly sure - but by deleting my transition effect for this div I have solved it. So, all is fine. Big thx again for your great support!