'Safari 15 weird transform bug/glitch

Hello im animation div on scroll using GSAP and on Safari 15 (below 15 no issues) weird thing is happening, part of letters stay as an afterimage on the sides. As you can see on screen below GSAP only adds simple transform to move element from left-right or right-left.

This is piece of code im using:

 this.$refs.link.forEach((link, index) => {
          gsap.to(link.$el, {
            scrollTrigger: {
              trigger: this.$el,
              scrub: true,
              start: 'top 70%',
              end: 'bottom top'
            },
            duration: 1,
            xPercent: index % 2 ? '-50' : '50'
          })
        })

Any ideas what may cause this issue?

enter image description here

csssafaritransformgsap


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source

Related Questions