Bug 132993 - Scrolling issues when using overflows
Summary: Scrolling issues when using overflows
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: CSS (show other bugs)
Version: 525.x (Safari 3.2)
Hardware: All All
: P2 Major
Assignee: Nobody
URL: http://wvgbug.lexerim.com
Keywords: InRadar
Depends on:
Blocks:
 
Reported: 2014-05-16 11:02 PDT by rvmouche
Modified: 2014-06-27 02:47 PDT (History)
1 user (show)

See Also:


Attachments

Note You need to log in before you can comment on or make changes to this bug.
Description rvmouche 2014-05-16 11:02:50 PDT
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
Comment 1 rvmouche 2014-05-16 11:39:21 PDT
After some testing I just noticed "-webkit-overflow-scrolling: touch;
}" makes it possible to scroll to the right to. No solution.
Comment 2 rvmouche 2014-05-16 12:35:25 PDT
Blink version of this bugreport: https://code.google.com/p/chromium/issues/detail?id=374301
Comment 3 rvmouche 2014-05-18 08:28:24 PDT
Addition: bugs are still persistent in the last alpha of webkit. Also, this issue arises: http://cl.ly/image/2f3O312u461y
Comment 4 Simon Fraser (smfr) 2014-06-26 14:27:27 PDT
<rdar://problem/17433582>
Comment 5 Simon Fraser (smfr) 2014-06-26 14:32:23 PDT
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?
Comment 6 Simon Fraser (smfr) 2014-06-26 14:34:46 PDT
Also for http://wvgbug.lexerim.com why can't you just use normal document scrolling and position:fixed for the top and bottom bars?
Comment 7 Simon Fraser (smfr) 2014-06-26 20:07:11 PDT
(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.
Comment 8 rvmouche 2014-06-27 02:47:16 PDT
(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.