Анимация шкалы GSAP вызывает лаг в Chrome на MacBook, но работает плавно в Safari и Ubuntu Chrome ⇐ CSS

[Anonymous]

Я сталкиваюсь с проблемой производительности с простой анимацией шкалы GSAP. It runs smoothly in Safari on macOS and in Chrome on Ubuntu, but lags or causes frame drops in Chrome on macOS.
You can see the issue here:
CodeSandbox Demo
System Details:
macOS (tested on MacBook Air M2)
Chrome Version: 137.0.7151.120 < /p>
Safari: Smooth < /p>
Ubuntu Chrome: Smooth < /p>
Шаги для воспроизведения:
Откройте ссылку на коды в Chrome on mass. Запасть /заикание при масштабировании /out. < /p>
Соответствующий код: < /p>


gsap.fromTo(
productsRef.current,
{ scale: 2, opacity: 0 },
{
scale: 1,
opacity: 1,
duration: 1,
ease: "power3.out",
scrollTrigger: scrollTriggerConfig,
}
);< /code>
< /div>
< /div>
< /p>


const tl = gsap.timeline({
scrollTrigger: {
trigger: heroRef.current,
start: "top top",
scroller: document.body,
end: "bottom+=300% top",
pin: pinimageRef.current,
scrub: 1,
anticipatePin: 1,
force3D: true,
onUpdate: () => {
pinimageRef.current.style.zIndex = 10; // Adjust as needed
},
pinSpacing: true,
onLeave: () => {
const pinImage = document.getElementById("pinopacityimg");
pinImage.style.opacity = "1";
},
onEnterBack: () => {
const pinImage = document.getElementById("pinopacityimg");
pinImage.style.opacity = "0";
},
},
});

tl.fromTo(
pinimageRef.current,
{ x: 0, y: 0, scale: 1, padding: pinimageRef.current.style.padding },
{
x: relativePosition.left,
y: relativePosition.top,
height: relativePosition.height,
width: relativePosition.width,
borderRadius: relativePosition.borderRadius,
duration: 2,
boxShadow: relativePosition.boxShadow,
padding: relativePosition.padding,
}
);

tl.to(pinimageRef.current, {
x: relativePosition2.left,
y: relativePosition2.top,
height: relativePosition2.height,
width: relativePosition2.width,
padding: relativePosition2.padding,
duration: 1,
});

tl.to(pinimageRef.current, {
x: relativePosition2.left,
y: relativePosition2.top,
height: relativePosition2.height,
width: relativePosition2.width,
borderRadius: relativePosition2.borderRadius,
boxShadow: relativePosition2.boxShadow,
duration: 1,
padding: relativePosition2.padding,
});< /code>
< /div>
< /div>
< /p>
Что я пробовал:
Настройка Will Chill: преобразование в CSS. < /p>
Использование преобразования: масштаб против других методов. /> Почему эта анимация отстает только на Chrome для macOS?>

Подробнее здесь: https://stackoverflow.com/questions/796 ... y-in-safar