Bug 300877 – REGRESSION: View Transitions cause page flash when opening/closing components

• Status: RESOLVED
• Resolution: DUPLICATE
• Component: Layout and Rendering

SUMMARY:
When using the View Transitions API to animate a side panel component mounting/unmounting, the page exhibits multiple white flashes - some across the entire screen and some across parts of components - instead of a smooth opening and closing transition. This works correctly in Chrome and worked in Safari 18.0.6, but broke after upgrading.

EXPECTED RESULT:
Only the side panel element should animate smoothly (slide in/out). The rest of the page should remain static during both opening and closing transitions.

ACTUAL RESULT:
The page exhibits multiple white flashes during both opening and closing transitions - some flashes cover the entire screen while others flash across individual component areas. These flashes are erratic and unpredictable. Have even tried disabling root animations in CSS, but that did nothing.

REGRESSION:
- Working: Safari 18.0.6
- Broken: Safari 18.2+ (started with "liquid glass" update)
- Also broken: Safari 18.2.6+
- Still works: Chrome (all versions with View Transitions support)

STEPS TO REPRODUCE:
1. Visit https://4055-viewtransition-safari.poki.io
2. Open and close the side panel by clicking on the search icon in the pill on the top left corner
3. Witness the flashes happen across the screen when you open and close it

ADDITIONAL NOTES:
- Related to bug #297845 (View Transitions flickering issues): https://bugs.webkit.org/show_bug.cgi?id=297845
- All standard View Transitions best practices have been implemented

This is for the company Poki, www.poki.com (we have now disabled it for iOS devices - so you will only be able to view the on the URL added)

The URL in the main description is no longer available, please use this URL instead: https://4057-branch-to-display-view-transition-bug-safari.poki.io/.

[Alexey Proskuryakov]

Thank you for the report! Could you please confirm the version numbers? Safari 18.2 is from December 2024, long before Liquid Glass.

(In reply to Alexey Proskuryakov from comment #3)
> Thank you for the report! Could you please confirm the version numbers?
> Safari 18.2 is from December 2024, long before Liquid Glass.

Hi Anton, thank you for your response! The version I'm getting the bug on is this: Version 26.0.1 (21622.1.22.11.15)

[Radar WebKit Bug Importer]

<rdar://problem/162902414>

[Matt Woodrow]

Thanks for reporting this!

This got fixed in bug 299091, should be in a Safari release before too long.

[Matt Woodrow]

*** This bug has been marked as a duplicate of bug 299091 ***