fade in works great in chrome but not in safari?

[patrickroppel]

Describe your problem 🧐

i have a very large portfolio on the index of my homepage. navigating to a project works fine and going back to the index as well. in chrome. but when i go back to the index in safari, the fade in animation does not work, when we have to restore scroll. at scroll y 0, it works, just as in chrome. me and my ai friends dont seem to be able to figure anything out that could be the problem. any help would be most appreciated.

What is your question? 🙋‍♀️

what could be the culprit if a transition works perfectly fine in chrome, but not in safari?

URL to minimal reproduction 🔗

https://roppeldelerue.netlify.app

Checked all these? 📚

• I have read and searched the official docs
• I have checked discussions and existing issues for answers to my question
• I agree to follow this project's Code of Conduct
• I have provided all necessary information to the best of my knowledge

[daun]

Things seem to be working fine when clicking through the site in Safari. This is probably much easier to debug when you share: a) how you've set up swup (JS + CSS) and b) two videos that show the difference between Safari and other browsers so everybody knows what exactly you're referring to.

[patrickroppel]

hi philipp

thanks for getting back to me. i am completely depending on ai to do this, hate to admit it. is this what you need

Stack:* Static HTML site (one full HTML file per route), Swup 4.8.3 + @swup/scroll-plugin 4.0.0 loaded from unpkg.

HTML (index.html)

<main class="swup-transition-fade" id="swup">
  <!-- page content -->
</main>
<script defer
  src="https://unpkg.com/swup@4.8.3/dist/Swup.umd.js"></script>
<script defer
  src="https://unpkg.com/@swup/scroll-plugin@4.0.0/dist/index.umd.js"></script>
<script defer type="module" src="/assets/js/dr-main.js"></script>

---

CSS (fade transition)

:root {
  --dr-transition: 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.swup-transition-fade {
  transition: opacity var(--dr-transition);
  opacity: 1;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}
html.is-animating .swup-transition-fade {
  opacity: 0;
}

---

JS — Swup init + hooks (dr-main.js)

// Manage scroll restoration ourselves; SwupScrollPlugin handles the rest.
if ("scrollRestoration" in history) history.scrollRestoration = "manual";
let swup;
try {
  const plugins = [];
  if (typeof SwupScrollPlugin !== "undefined") {
    plugins.push(
      new SwupScrollPlugin({
        doScrollingRightAway: false,
        animateScroll: false,
        // Don't reset scroll when navigating back to "/" (landing page
        // restores its cached scroll position via the plugin).
        shouldResetScrollPosition: (link) => {
          try {
            const path = new URL(link.href).pathname
              .replace(/\/index\.html$/, "/");
            return path !== "/";
          } catch (_) {
            return true;
          }
        },
      }),
    );
  }
  swup = new Swup({
    animationSelector: '[class*="swup-transition-"]',
    cache: true,
    plugins,
    // Treat "/foo/index.html" and "/foo/" as the same URL for caching.
    resolveUrl: (url) => url.replace(/\/index\.html$/, "/"),
  });
} catch (err) {
  console.error("Swup init failed — page transitions disabled", err);
}
if (swup) {
  // Before DOM swap: tear down page-specific listeners / observers.
  swup.hooks.before("content:replace", async (visit) => {
    const isLeavingPortfolio = !!document.getElementById("dr-landing-page");
    const isLeavingProject   = visit.from.url.includes("/dr-projects/");
    if (isLeavingPortfolio) {
      const { cleanup } = await import("./dr-portfolio.js");
      await cleanup();
    } else if (isLeavingProject) {
      const { cleanup } = await import("./dr-project.js");
      await cleanup();
    }
  });
  // After DOM swap: re-init page-specific code.
  // Read SwupScrollPlugin's cached scroll position so the page-init code
  // knows which content batch will land in the viewport (needed to avoid
  // a Safari fade-in flash on long scrolled-back pages).
  swup.hooks.on("content:replace", async (visit) => {
    try {
      let initialScrollY = 0;
      if (!visit.to.hash) {
        const scrollPlugin = swup.findPlugin?.("SwupScrollPlugin");
        if (scrollPlugin?.getCachedScrollPositions) {
          const cached = scrollPlugin.getCachedScrollPositions(visit.to.url);
          initialScrollY = cached?.window?.top ?? 0;
        }
      }
      await initPage({ initialScrollY });
    } catch (err) {
      console.error("initPage failed after content replace", err);
    }
  });
  swup.hooks.on("page:view", (visit) => updateNavigationUI(visit.to.url));
}
// First (non-Swup) page load.
document.addEventListener("DOMContentLoaded", () => initPage());
// Drop Swup's cache when the tab is hidden so users get fresh HTML when
// they return after a long time.
document.addEventListener("visibilitychange", () => {
  if (document.hidden && swup) swup.cache.clear();
});

these are two films. the problem happens when clicking the close button, going back to the index. on chrome it fades nicely in, as it should, on safari it just pops in.

https://github.com/user-attachments/assets/689c00d8-3cc5-4970-af60-018a273884bb
https://github.com/user-attachments/assets/308efa3f-c98e-4320-a486-d093df783dad

we are loading batches into empty placeholder divs. on the very first batch, it also works like a charm in safari. but as soon as we have to restore scroll, boom, it snaps in.

let me know if you need anything else that could be helpful. with kindest regards and many thanks in advance, patrick

[patrickroppel]

i fixed it. it was a problem of how we cached index on the way to a project. all very smooth now. thank you very much anyway. regards to gregory.

[daun]

👌