I'm encountering a browser-specific issue with a React infinite scroll animation component. The animation works perfectly in Chrome on MacBook, but breaks specifically in Safari: ✅ Chrome on MacBook: Works perfectly ❌ Safari on MacBook: Animation and layout issues Technical Details Environment Browser: Safari: Version 18.1.1 (20619.2.8.11.12) MacBook 13-inch display React 18 GSAP for animations TailwindCSS for styling Next.js/TypeScript project Implementation const MovingGrid: React.FC = () => { useEffect(() => { const initAnimation = () => { const container = containerRef.current; if (container) { gsap.to(container, { x: `-${firstSet.clientWidth}`, duration: 30, ease: "none", repeat: -1, onRepeat: () => { gsap.set(container, { x: 0 }); } }); } }; }, []); return ( <div className="hidden lg:block overflow-hidden w-full relative"> <div ref={containerRef} className="flex absolute -bottom-[100px]"> {/* Grid content */} </div> </div> ); }; Safari-Specific Behavior Images overflow the container in Safari only Layout gets disrupted when animation resets Same code works perfectly in Chrome on the same machine Cross-Browser Testing Results Safari on MacBook: Issues with animation and layout Chrome on MacBook: Works as expected Firefox on MacBook: Works as expected Safari on iOS: Needs testing Chrome on Windows: Works as expected Attempted Solutions Safari-specific CSS fixes: /* Attempted Safari-specific fixes */ @supports (-webkit-hyphens:none) { .moving-grid { transform: translateZ(0); -webkit-transform: translateZ(0); backface-visibility: hidden; -webkit-backface-visibility: hidden; } } Modified GSAP configuration for Safari: gsap.config({ force3D: true }); Tried various CSS transform and positioning approaches: className="transform will-change-transform" style={{ WebkitTransform: 'translate3d(0,0,0)' }} Questions Are there known Safari-specific issues with GSAP animations that require special handling? Does Safari handle infinite scroll animations differently from Chrome in terms of performance or rendering? Are there recommended Safari-specific optimizations for smooth animations? Should we implement a different animation approach specifically for Safari users? Investigation Notes Performance metrics show no significant issues Animation frame rate is consistent Layout calculations appear correct before animation starts Impact This issue affects a crucial part of our property showcase website, specifically impacting Safari users on MacBook devices. Given Safari's significant user base on MacBooks, this needs to be resolved for a consistent cross-browser experience. Additional Context The animation is part of a larger property showcase feature Performance is crucial for user experience Need to maintain visual consistency across browsers Reproduction Steps Open website Safari on MacBook [pinkdoorbnb .com] Observe the infinite scroll animation Compare with Chrome on the same device Note the differences in animation behaviour and layout I would greatly appreciate any insights into Safari-specific animation handling or alternative approaches that work consistently across browsers. Here is sample Google Chrome ⬇ Safari ⬇