Bug 290146
| Summary: | View Transitions Don't Pick up view-transition-name if CSS is loaded at the same time | ||
|---|---|---|---|
| Product: | WebKit | Reporter: | Sebastian Markbåge <sebastian> |
| Component: | CSS | Assignee: | Nobody <webkit-unassigned> |
| Status: | NEW | ||
| Severity: | Normal | CC: | ahmad.saleem792, bramus, karlcow, koivisto, mattwoodrow, ntim, webkit-bug-importer |
| Priority: | P2 | Keywords: | BrowserCompat, InRadar |
| Version: | Safari Technology Preview | ||
| Hardware: | Mac (Apple Silicon) | ||
| OS: | macOS 15 | ||
Sebastian Markbåge
https://repro-view-transition-reflow-bug.vercel.app
When a new link tag is inserted with a previously uncached CSS, this prevents the `view-transition-name` from getting picked up until there's some other layout event. If it's done at the same time as `startViewTransition` is called, then there hasn't been a layout calculation yet when the "old" snapshot is computed. This leads the "old" name not to get picked up.
The second time you load the repro the CSS might be cached and it works again. Therefore it's easiest to repro with caching turned off.
If you add something that forces layout like `clientWidth` then it works correctly. Even if the CSS isn't cached.
It seems like `startViewTransition` should itself force layout calculation before it takes the snapshot.
Reproduces on STP Release 215 (Safari 18.4, WebKit 20622.1.6.111.4) and iOS 18.4 Beta 4.
| Attachments | ||
|---|---|---|
| Add attachment proposed patch, testcase, etc. |
Karl Dubost
Thanks Sebastian for the report.
Safari Technology Preview 125/18.4 20622.1.6
Firefox Nightly 138.0a1 13825.3.11
Google Chrome Canary 136.0.7080.0 7080.0
Safari: indeed with cache disabled, doesn't pick up the smooth transition. It goes directly from Old to New
Chrome: Cache disabled too. Show the smooth transition
Firefox: Doesn't have it, stays on old.
Radar WebKit Bug Importer
<rdar://problem/148067360>