View transition admin bar quirks

[zieladam]

Since 7.0 enabled view transitions in wp-admin (#64470, ​PR 10699), navigating between admin screens crossfades the entire admin sidebar into itself, even when its markup is nearly identical between the two pages.

Screencast: ​https://github.com/user-attachments/assets/7a48ae52-70d7-47ee-95e0-aec80463dcde

Steps to reproduce

1. Run trunk in Chrome.
2. Log in to wp-admin.
3. Click between two screens whose sidebars are nearly identical (e.g. Dashboard → Posts → Pages).

Expected

Sidebar stays visually stable across the navigation — nothing in it has changed.

Actual

The whole sidebar crossfades between two identical snapshots.

Notes

Claude claims, to be verified:

• src/wp-admin/css/view-transitions.css gives each top-level menu item a stable view-transition-name, but #adminmenu itself does not — so the whole sidebar falls into the default root snapshot and crossfades on every navigation.
• a likely fix is to give #adminmenu (and possibly #adminmenuwrap) its own view-transition-name so it's treated as a single persistent element across navigations rather than part of the default root snapshot.

cc @westonruter @annezazu

[mukesh27]

Screencast: ​https://github.com/user-attachments/assets/7a48ae52-70d7-47ee-95e0-aec80463dcde

Not working. Update the URL please

[westonruter]

Replying to zieladam:

Screencast: ​https://github.com/user-attachments/assets/7a48ae52-70d7-47ee-95e0-aec80463dcde

This is a 404. Can you upload here?

[zieladam]

Oh! It works on my end, even in private mode. How weird! I couldn't upload here because of the 10MB limit, but I've uploaded it to my site, which uploaded it to VideoPress. Hopefully this works:

​https://videos.files.wordpress.com/Lnml4hak/574645931-7a48ae52-70d7-47ee-95e0-aec80463dcde.mp4

[westonruter]

@zieladam I'm struggling to see the exact issue from your video. I'm seeing a bit of a flicker in the admin bar, for example when navigating from the Dashboard to the Posts screen. Is that what you're referring to? I think this may be due to Command Palette node since it is revealed/populated with JavaScript with the page loads. We might want to hold painting until DOM load. See ​Anti-flickering in the View Transitions repo.

Closely related to this is the issue of Admin Notice instability (#45186, comment). This may be a workaround, however, for a more fundamental issue.

[joedolson]

I'm removing the accessibility focus from this; for accessibility purposes, this is resolved by the existing support for prefers-reduced-motion and otherwise doesn't have any additional impact beyond any other aspect of the view transition animation.

Fixes the admin menu flicker/crossfade during view transitions by giving the sidebar containers stable view-transition-name values.

## Testing

• Run trunk in Chrome.
• Log in to wp-admin.
• Navigate between screens with similar sidebars, for example Dashboard -> Posts -> Pages.
• Confirm the admin menu is no longer treated as part of the root transition snapshot.

## Notes

• Verified locally that #adminmenuwrap and #adminmenuback receive separate view-transition groups during navigation in Chrome via Playwright/runtime inspection.

[dhrupo]

PR opened for review: ​https://github.com/WordPress/wordpress-develop/pull/11582

This patch gives #adminmenuwrap and #adminmenuback stable view-transition-name values in src/wp-admin/css/view-transitions.css so the admin menu is not left entirely in the root transition snapshot during admin navigation.

Testing performed:

• Reproduced on trunk in Chrome while navigating between Dashboard -> Posts -> Pages.
• Verified locally that the patched CSS is applied.
• Verified via Playwright/runtime inspection that #adminmenuwrap and #adminmenuback receive separate view-transition groups during navigation.

Keywords: has-patch needs-testing

[audrasjb]

We now have a PR that needs-testing.
I'm self assigning this ticket as it doesn't have any owner yet, but more tests are welcome! 🧪

[nikunj8866]

Test Report

Description

✅ This report validates that the indicated patch works as expected.

Patch tested: ​https://github.com/WordPress/wordpress-develop/pull/11582

Environment

• WordPress: 7.1-alpha-20260416.035027
• PHP: 7.4.33
• Server: PHP.wasm
• Database: WP_SQLite_Driver (Server: 8.0.38 / Client: 3.51.0)
• Browser: Chrome 147.0.0.0
• OS: Windows 10/11
• Theme: Twenty Twenty-Five 1.4
• MU Plugins: None activated
• Plugins:
  • Test Reports 1.2.1

Steps to Test

1. Open the pull request: ​https://github.com/WordPress/wordpress-develop/pull/11582
2. Click "Test this pull request with WordPress Playground." to launch WordPress Playground.
3. Navigate between admin pages with similar sidebars: Dashboard > Posts > Pages
4. Observe the sidebar during navigation transitions.

Actual Results

1. ✅ Issue resolved with patch.
2. The admin sidebar should remain visually stable during navigation.

Supplemental Artifacts

Before Patch: ​https://www.awesomescreenshot.com/video/51776620?key=76470c3ab3ab51bc2d86bdbab37c53cd
After Patch: ​https://www.awesomescreenshot.com/video/51776671?key=6079e6fdbfcfe82cd66485a3f9683a2d

[darshitrajyaguru97]

Test Report

Description

✅ This report validates that the indicated patch works as expected in a different PHP environment.

• Patch tested: ​https://github.com/WordPress/wordpress-develop/pull/11582

Environment

• WordPress: 7.1-alpha-20260416.035027
• PHP: 7.4.33
• Server: Apache
• Database: MySQL
• Browser: Chrome
• OS: Windows
• Theme: Twenty Twenty-Five
• MU Plugins: None activated

Steps to Test

# Applied the patch
# Navigated between admin pages with similar sidebars (Dashboard → Posts → Pages)
# Observed the sidebar during navigation transitions

Actual Results

✅ Issue resolved with the patch.

• The admin sidebar remains visually stable during navigation.

Expected Results

• The admin sidebar should remain visually stable during navigation.

Conclusion

• The patch works as expected on PHP 8.2
• Confirms compatibility beyond the originally tested PHP 7.4 environment

After applying this patch, I noticed an issue. you can check it in the video.

​https://github.com/user-attachments/assets/c7f2b092-b5ca-45d2-b42d-83741f234b25

Confirmed this is a valid issue. #adminmenuback is a fixed background layer, and giving it its own view-transition-name can produce a bad transition snapshot. I pushed c06aea7590 to narrow the patch so only #adminmenuwrap participates, while leaving the menu item transition names in place.

In my 7.1-alpha-62328 test installation, I noticed visual bugs in the nav sidebar. The expanding sub-nav section seems to be a bit unsmooth and the sub-nav items are jumping a bit. Take a look:

​https://github.com/user-attachments/assets/ce79c7a4-e7ce-4f69-b16e-aef97a1a5884

Google Chrome - Version 147.0.7727.138 on MacOS 26.4.1