fix: prevent overlay flash when closing iOS mobile nav menu (#1548)

[AbdullahShafqat-OG]

Fixes a visual glitch where the overlay briefly flashes when closing the mobile navigation menu.

The issue was caused by a discrepancy in transition durations between MobileMenu and ModalOverlay.

The transition timing has been streamlined by defining it in MobileMenu and passing it down as a prop to ModalOverlay. This ensures both components stay in sync and eliminates the visual inconsistency.

Fixes #1548

Before

before.mp4

After

after.mp4

[vercel]

@AbdullahShafqat-OG is attempting to deploy a commit to the Svelte Team on Vercel.

A member of the Team first needs to authorize it.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
svelte-dev	Ready	Preview	May 25, 2026 7:05pm

[teemingc]

Sorry for taking a long time to look at this. I've tested on the latest iOS and this doesn't seem to be an issue anymore

[AbdullahShafqat-OG]

@teemingc I just tried with iOS 26.0.1 on iPhone 15 and still flashes for me. Perhaps it does not show up in a later version of iOS. Should it still be addressed perhaps to fix in previous iOS versions as well?

[teemingc]

You’re right. I’m wondering if we can preserve the quick transition on menu close though. Is the flash caused by the 100ms transition duration?

[AbdullahShafqat-OG]

The menu animation in the deployed version is currently using 200ms already as well. The 100ms was for the modal-overlay which was the partially faded black panel on top of the screen and behind the navigation menu.

Root cause of the flash: the overlay and menu had different durations/easings, so the overlay reached opacity: 0 before the menu finished. While it sat there waiting, iOS dropped the fill: forwards, reverting it to its pre-animation opacity hence the flash.

It does work for transition duration 100ms but that gets a very snappy feel and feels off from the original feel of the menu that was already there. Could add something that caters to this iOS caveat but I think we can keep the fix simple here also aligning the transition times for both the modal and the menu animation does make sense as well