[Webkit-unassigned] [Bug 173887] New: Scroll snap behaves unpredictably on body element, when combined with fixed overlay and changing content.
bugzilla-daemon at webkit.org
bugzilla-daemon at webkit.org
Tue Jun 27 14:20:57 PDT 2017
https://bugs.webkit.org/show_bug.cgi?id=173887
Bug ID: 173887
Summary: Scroll snap behaves unpredictably on body element,
when combined with fixed overlay and changing content.
Product: WebKit
Version: Safari 10
Hardware: iPhone / iPad
OS: iOS 10.3
Status: NEW
Severity: Normal
Priority: P2
Component: Layout and Rendering
Assignee: webkit-unassigned at lists.webkit.org
Reporter: lists at scratchdisk.com
CC: bfulgham at webkit.org, simon.fraser at apple.com,
zalan at apple.com
I am trying to get scroll-snap to work on the body element in iOS, so that the navigation bar is allowed to disappear when the user scrolls the website, all while supporting scroll-snapping to snap to full pages.
This works well as long as I don't add an overlay element with changing content that is always visible using `position: fixed;` styling.
Here a test-case that illustrates the faulty behavior on iOS:
https://safari-scroll-snap-bug.netlify.com
On Safari / macOS and on other browsers, this behaves as it should. On iOS, I see this faulty behavior that leads to an uncontrollable website and excessive flickering sometimes:
https://safari-scroll-snap-bug.netlify.com/video.mp4
It looks as if the changes in the `#overlay` element are triggering a reflow in the `body`, which then confused the scroll snap behavior. This is surprising, as it has `position: fixed;` set and changes in it should not affect the layout underneath.
Another possible factor could be the changing view height due to the disappearing navigation bars.
But once I add the `display: none;` to the `#overlay` element, the scroll behaves as it should.
The only workaround I could find so far is setting `overflow: hidden` on `body` and having `.pages` scroll instead, but this in turn breaks the hiding of navigation bars on iOS, which is not desirable.
I am hopeful that this information will assist with a timely fix of this bug.
--
You are receiving this mail because:
You are the assignee for the bug.
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.webkit.org/pipermail/webkit-unassigned/attachments/20170627/a1c10bff/attachment.html>
More information about the webkit-unassigned
mailing list