Safari-Specific React Animation Issues: Infinite Scroll Breaking on MacBook

Question

Created 11h

Replies 0

Boosts 0

Participants 1

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 ⬇

Boost