search

flackr / scroll-timeline

A polyfill of ScrollTimeline.
Apache License 2.0
887 stars 82 forks source link

Throws random errors on load in Safari #271

Open siddharth-kaushik opened 3 weeks ago

siddharth-kaushik commented 3 weeks ago

Safari v17.5 Using named view-timeline on parent (larger than scroll-port) to animate one of the child with animation range.

Sometime seeing below errors (one or the other) on load in Safari. Sometimes loads just fine and works fine on Firefox 🤷‍♂️

👇 A

Screenshot 2024-06-13 at 12 45 32 PM

👇 B

Screenshot 2024-06-13 at 12 46 12 PM
bramus commented 3 weeks ago

As for B: are you animating a pseudo-element (::before or ::after) by any chance?

siddharth-kaushik commented 2 weeks ago

Yes, one of the element is a pseudo element.

Edit: The view-timeline is used by a regular element but the animation itself updates the css variables that is used by pseudo element after

Link:

Screenshot 2024-06-15 at 6 08 38 PM
bramus commented 2 weeks ago

OK, that would be the underlying problem that needs to get fixed. Core of the issue is that in JavaScript there is no proper API to get pseudo-elements. The Web Animations API has a workaround for this built-in, but that’s currently not used here.