[Webkit-unassigned] [Bug 183571] New: [scroll-snap] in iOS scrollTop of scroll-snapping scrollport reports incorrectly if child of snapping element uses custom property which is set within scroll event?

[bugzilla-daemon at webkit.org]

https://bugs.webkit.org/show_bug.cgi?id=183571

            Bug ID: 183571
           Summary: [scroll-snap] in iOS scrollTop of scroll-snapping
                    scrollport reports incorrectly if child of snapping
                    element uses custom property which is set within
                    scroll event?
           Product: WebKit
           Version: Safari 11
          Hardware: iPhone / iPad
                OS: iOS 11
            Status: NEW
          Severity: Normal
          Priority: P2
         Component: CSS
          Assignee: webkit-unassigned at lists.webkit.org
          Reporter: hi at jonjohnjohnson.com

It took hours to figure out what was causing the incorrect scrollTop within a component I was building, only to discover quite a strange overlap of circumstances in this reduced test case...

Expected:
When scrolling a scroll-snapped scrollport get the true scrollTop value, always.

What is happening:
In iOS Safari 11.2.6, not desktop safari, when scrolling a scrollport that is using scroll-snapping, if you are setting a css custom property on it's scroll event, based upon it's scrollTop value AND then using that property as a value of a property of an element WITHIN an element that contains a scroll-snap-coordinate, it causes the scrollTop to be reported incorrectly. Reporting what would be the scrollTop of a 'snapped' position while scrolling away from that snapped position.

Steps to reproduce:
1. Go to this test case -> http://jsbin.com/vexememefa/1/edit?html,css,js,output
2. Scroll the blue box.
3. Notice in the console and in the upper left of the screen, the reported scrollTop of the blue box.
4. There is a black square in each panel of the blue box that has it's opacity set with a custom property based upon the scrollTop.
5. When scrolled/snapped to the second panel, try *slowly scrolling back to the top, notice how the scrollTop doesn't change until halfway to the first panel.
6. Notice how the opacity also doesn't change while scrolling that distance.
7. Check the checkbox in the upper right, to set the opacity property of the black boxes to just 1.
8. Now scroll the blue box again and see that the scrollTop reports correctly.

Note, if not setting the custom property at all, things work perfectly.
Note, if the custom property is being used on an the actual element with scroll-snap-coordinate st (not a child element or pseudo element), things work perfectly.
Note, if not using scroll-snap on the scrollport, things work perfectly.

Pinging wenson_hsieh at apple.com (validated previous scroll-snap bugs)

-- 
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/20180312/19d3f1da/attachment.html>