Bug 132993 – Scrolling issues when using overflows

• Status: NEW
• Component: CSS

When using an overflow on html, body the scrolling isn't fluid anymore (and loses it momentum on iOS) and the back-to-top button doesn't work anymore. The momentum-scrolling on iOS can be restored by adding -webkit-overflow-scrolling: touch, but of course that is far from ideal.

Details: http://stackoverflow.com/questions/23697830/website-doesnt-properly-scroll-not-fluid-back-to-top-fails/23700235#23700235 ; http://wvg.lexerim.com is replaced with http://wvgbug.lexerim.com as I'm disabling the back-to-top button on the main dev site for Safari and Chrome.

Tested with: Safari 7.0.3 (9375.75.14) on OS X and Safari on iOS 7.1.1

After some testing I just noticed "-webkit-overflow-scrolling: touch;
}" makes it possible to scroll to the right to. No solution.

Blink version of this bugreport: https://code.google.com/p/chromium/issues/detail?id=374301

Addition: bugs are still persistent in the last alpha of webkit. Also, this issue arises: http://cl.ly/image/2f3O312u461y

[Simon Fraser (smfr)]

<rdar://problem/17433582>

[Simon Fraser (smfr)]

Please file a separate bug report for each issue. This bug is currently a mixture of iOS and OS X issues and feature requests.

Can you produce a small test case for the "scroll to top" issue with unmagnified JS? What JS does your scroll to top button call?

[Simon Fraser (smfr)]

Also for http://wvgbug.lexerim.com why can't you just use normal document scrolling and position:fixed for the top and bottom bars?

[Simon Fraser (smfr)]

(In reply to comment #1)
> After some testing I just noticed "-webkit-overflow-scrolling: touch;
> }" makes it possible to scroll to the right to. No solution.

See bug 134377.

(In reply to comment #5)
> Please file a separate bug report for each issue. This bug is currently a mixture of iOS and OS X issues and feature requests.
> 

Looks like you've splitted already with comment #7? I would suggest to indeed use this issue for the back-to-top problem (Desktop only) and for momentum/-webkit-overflow-scrolling: touch refer to bug 134377?

> Can you produce a small test case for the "scroll to top" issue with unmagnified JS? What JS does your scroll to top button call?

Unfortunately I'm not currently able to do this (knowledge and time-related), however as I'm using a free downloadable template as bases I can point you in the right direction :)
Code: http://www.joomlart.com/joomla/templates/purity-iii ; the issue appears when I start using an overflow on html, body and only on webkit-based browsers. Firefox and IE work perfectly.

(In reply to comment #6)
> Also for http://wvgbug.lexerim.com why can't you just use normal document scrolling and position:fixed for the top and bottom bars?

While this does fix this horizontal scrolling issue; the twitter bar is gone whenever I do this. I know the scrolling issue is originated in the bar (some code I bought) and therefor I worked around it with the overflows. This however creates the issues mentioned before in Webkit based browsers and the momentum issue (134377) on iOS.
---

Thanks for looking into it and if you guys need any more info or something, just say so.