Compatibility issue or misuse

[jotaachm]

Hi!
I'm trying to use react spring on my landing page. However, while it's working perfectly on Chrome, it doesn't render on Safari so I'm wondering whether this is due to a compatibility issue or something that I am doing wrong. Thanks in advance!

import React from "react";
import { Link } from "react-router-dom";
import { useSpring, animated } from "react-spring";

import backgroundImage from "../../assets/Landing/screenshots/hero.png";

export default function Hero() {
  const div1Animation = useSpring({
    from: { opacity: 0, transform: "translateX(-100%)" },
    to: { opacity: 1, transform: "translateX(0%)" },
    config: { duration: 1000 },
  });

  const div2Animation = useSpring({
    from: { opacity: 0, transform: "translateX(100%)" },
    to: { opacity: 1, transform: "translateX(0%)" },
    config: { duration: 1000 },
  });

  return (
    <div className="relative isolate overflow-hidden bg-white">
      <div className="mx-auto max-w-7xl px-6 pt-10 pb-24 sm:pb-32 lg:flex lg:py-40 lg:px-8">
        {/* DIV 1 */}
        <animated.div
          className="mx-auto max-w-2xl lg:mx-0 lg:max-w-xl lg:flex-shrink-0 lg:pt-8"
          style={div1Animation}
        >
          <h1 className="mt-20 md:mt-16 sm:mt-16 text-4xl font-bold tracking-tight text-gray-900 sm:text-6xl">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
          </h1>
          <p className="mt-6 text-lg leading-8 text-black-600 font-bold">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
          </p>
          <p className="mt-6 text-lg leading-8 text-gray-600">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum nec enim vel elit lobortis efficitur. Morbi vestibulum sed diam non condimentum. Nulla facilisi. Nullam sed justo in odio consequat vulputate. Suspendisse potenti. Mauris ac elit ante.
          </p>
          <p className="mt-6 text-lg leading-8 text-gray-600">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris facilisis arcu at fermentum pellentesque. Pellentesque aliquam lectus non elit lacinia, a tincidunt risus efficitur. Duis commodo massa vitae leo tristique, non auctor urna porttitor.
          </p>
          <div className="mt-10 flex items-center gap-x-6">
            <Link
              to="/signup"
              className="rounded-md bg-blue-600 px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-blue-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600"
            >
              Sign Up
            </Link>
            <Link to="/contact" className="text-sm font-semibold leading-6 text-gray-900">
              Contact Us <span aria-hidden="true">→</span>
            </Link>
          </div>
        </animated.div>
        {/* DIV 2 */}
        <animated.div
          className="mx-auto mt-16 flex max-w-2xl sm:mt-24 lg:ml-10 lg:mt-0 lg:mr-0 lg:max-w-none lg:flex-none xl:ml-32"
          style={div2Animation}
        >
          <div className="max-w-3xl flex-none sm:max-w-5xl lg:max-w-none">
            <div className="-m-2 rounded-xl bg-gray-900/5 p-2 ring-1 ring-inset ring-gray-900/10 lg:-m-4 lg:rounded-2xl lg:p-4">
              <img
                src={backgroundImage}
                alt="App screenshot"
                width={2432}
                height={1442}
                className="w-[66rem] rounded-md shadow-2xl ring-1 ring-gray-900/10"
              />
            </div>
          </div>
        </animated.div>
      </div>
    </div>
  );
}

[joshuaellis]

IMHO this example is contrived, i would remove all the CSS noise and isolate whether the hooks work on safari or not before investigating further.