search

cubiq / iscroll

Smooth scrolling for the web
http://iscrolljs.com
MIT License
12.87k stars 3.8k forks source link

Content cut off at the bottom on iOS Safari using iscroll-probe.js #1181

Open suymilk opened 7 years ago

suymilk commented 7 years ago

Hi,

I've actually resolved this issue but thought I'd leave a note here in case it's helpful for further development or anyone else running into the same problem.

tldr; iscroll-probe.js was not calculating the scroller height correctly for iOS 10.3.2 Safari.

In my instance, because the scroller height was being calculated by using offsetHeight (line 310, function me.getRect), it was discounting the margins I had on my scrolling div.

I resolved the issue by using paddings instead of margins on that div. I imagine if that's not an option, and you're already using jQuery, an alternative might be to use jQuery's .outerHeight(true).

Funnily enough, this issue was only happening on iOS Safari and not on the Android native browser. (Didn't test other platforms.)

bradacjan commented 7 years ago

A simillar issue happened to us on Windows in Chrome - if margin-top was used on the scrolling content, then the bottom part of the page got cut off (by the exact size of the margin). But if padding is uses, everything seems to work fine - thank you for the tip, @suymilk.

En example of the issue: image (Notice the button in the bottom cut in half)