CSS layers reordered by Icon

[cco3]

Environment

------------------------------
- Operating System: Linux
- Node Version:     v20.12.0
- Nuxt Version:     3.16.1
- CLI Version:      3.24.0
- Nitro Version:    2.11.8
- Package Manager:  pnpm@8.15.6
- Builder:          -
- User Config:      modules, devtools, compatibilityDate, future, css
- Runtime Modules:  @nuxt/ui@3.1.1
- Build Modules:    -
------------------------------

Is this bug related to Nuxt or Vue?

Nuxt

Version

v3.1.1

Reproduction

https://codesandbox.io/p/devbox/clever-ptolemy-vcshnz

1. Visit repro link in chrome (make sure to click the refresh button to get a clean state)
2. Inspect element and view layer order

4. Click link to go to the page without an icon
5. Inspect an element (important: reassesses layer ordering in chrome) and view layer order
6. Observe that layer order has not changed

7. Click link to go to the page with an icon
8. Inspect an element (important: reassesses layer ordering in chrome) and view layer order
9. Observe that layer order has changed

Additional context

The red/green div in the repro demonstrates an example of how this can end up applying unexpected styles after a page navigation event.

Original question asked here: #4054