BTW: Adding will-change: transform to the SVG does also fix the error and might make more sense as the SVG itself is only rotated and scaled.
My reading is Safari applies some kind of optimization as soon as a will-change is present.
Adding will-change: filter; to the parent DIV that has the blur-filter applied did not work.
Adding will-change: filter; to the SVG that is being transformed (rotated/scaled) does fix the issue. 🤯
I am sure this is a Safari bug not a GSAP bug. Hence, the title.
GSAP has historically found ways to circumvent browser inconsistencies and bugs, so my hope was this is maybe a known problem, that can be addressed by doing it "another" way.
Hello @Carl, Hello @Jack, Hey @Yashi-2
Manual animation (click the button in the CodePen demo) works. It just does not work synced to the scroll.
I will try a workaround the <defs> Animation. Will post an Update here.
I am using ScrollMagic with the GSAP Plugin.
I am trying to reveal a line based on an animated mask that should sync to the scroll.
This demo works on Desktop but not on iOS:
https://codepen.io/paul-siteway/full/aVGwEw/
I am not sure if this is an ios, svg, scrollmagic or gsap bug.
Any help is appreciated!