Bug 183571 – [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?

• Status: NEW
• Component: CSS

[jonjohnjohnson]

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 [e-mail] (validated previous scroll-snap bugs)

[jonjohnjohnson]

With the console out, the effect isn't as noticeable, with the scrollTop value staying the same just 5 to 10 scroll events before "catching up". But when not using the console, you can wiggle/scroll from the second panel upwards without the scrollTop value ever making a move until making it halfway back to the first panel.

[Radar WebKit Bug Importer]

<rdar://problem/38416953>