Flicker during parallel animation on iOS

[layout-ch]

What did you expect? 🧐

Smooth page transitions without any visual glitches or flickers on iOS devices.

What actually happened? 😵‍💫

During page transitions using the Parallel plugin, there's a flicker or flash at the top of the screen on iOS. This occurs about four times out of five when scrolling down and clicking a link. The flash sometimes covers the whole screen or just part of it.

Swup and plugin versions 📝

"@swup/parallel-plugin": "^0.4.0",
"astro": "^4.15.8",
"swup": "^4.7.0"

What browsers are you seeing the problem on? 🧭

Safari

Relevant log output 🤓

No log output; the issue is purely visual.

URL to minimal reproduction 🔗

https://stackblitz.com/~/github.com/layout-ch/astro-gsap?file=.git%2FCOMMIT_EDITMSG

Checked all these? 📚

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

[layout-ch]

ScreenRecording_09-22-2024.13-52-31_1.MP4

Demo on how it looks like

Thank you so much in advance. I've been struggling with this glitch for three days now and am starting to feel quite desperate 😅

[hirasso]

Could the fix be as simple as disabling the tap highlight color?

a {
  -webkit-tap-highlight-color: transparent;
}

[layout-ch]

No.. if you look in the video its the whole upperscreen that flashes, not the "a" element....

[hirasso]

Right...

[daun]

I've converted this to a discussion to get a few more eyeballs on it.

If it turns out to be an actual bug, we can still create an issue from it to keep track of things.

[daun]

Might have to do with the bottom browser bar appearing after clicking the link. If you advance the screen recording frame by frame, there's a jump where the upper bound of the gray link section moves downward at the same time the browser ui pops up from below. Might be that setting the offset to the current scroll position (containers[0].previous.style.top) needs to take that into account?

[layout-ch]

Hey @daun,

Tried it out with this config :

swup.hooks.before("content:insert", (visit, { containers }) => {
  // containers[0].previous.style.top = `-${window.scrollY}px`;
  window.scrollTo(0, 1, { immediate: true });
});

So the browser tab once, out of the way, stays off screen thanks to the scrollTo(0,1) and I removed the offet top but the flicker still persists.

But it tried one more thing :

If I leave the config of the swup hook like it was :

swup.hooks.before("content:insert", (visit, { containers }) => {
  containers[0].previous.style.top = `-${window.scrollY}px`;
  window.scrollTo(0, { immediate: true });
});

but in the CSS I comment out the transform of the previous-container it's seems to fix the flickering !

But since I still wanna animate out the old container, is there a other way to solve that ? 😄

[daun]

Interesting. Sometimes, the transforms can be tricky.

You could try using 3d transforms, that used to be somewhat required when doing transforms on iOS in the past.

  .transition-overlap.is-previous-container {
    transform: translate3d(0px, -300px, 0px) scale(0.9);
    opacity: 0;
  }

You might also try setting a base transform on all containers even outside the transition:

  .transition-overlap {
    transform: translateY(0px);
  }

Last thing I can think of is using lvh or vh instead of dvh units, that might solve the jump because of the browser bottom bar appearing.

  .transition-overlap.is-next-container {
    transform: translateY(100lvh);
  }

[layout-ch]

I tried all of them individually and together but the flickering persists, it's really the scrollTo(0) coupled with the element that is transitioning, in my case the .is-previous-container, that causes the issue. Let's hope that a good soul comes across the thread and knows the magic trick to make it work....