- From: Bramus via GitHub <noreply@w3.org>
- Date: Thu, 29 Jan 2026 21:59:07 +0000
- To: public-css-archive@w3.org
During the call I noticed that I didn’t list any specific use-case in the issue (and during the call I also couldn’t immediately come up with one).
The main use-case here is MPA View Transitions, where on the new page you want to delay the VT’s animation until an image is loaded.
See this author request for example: https://x.com/jimniels/status/1661557620719734785
> I'm transitioning from a 128px image to a 512px image and I get a flash in the animation—which is kinda expected. I assume it fetches the HTML and runs the transition before the image loads
>
> https://github.com/user-attachments/assets/8ce7ea55-7a27-42e7-84ef-4e1e1fc29e9a
The resulting code (using the proposal in this issue) to fix this, would look something like this:
```js
window.addEventListener('pagereveal', async (e) => {
if (e.viewTransition) {
await e.viewTransition.ready;
// Don’t run the View Transition’s animations until the big image has actually loaded
e.viewTransition.waitUntil(makeSureTheBigImageIsLoaded, { phase: "animating" });
}
}
```
The `makeSureTheBigImageIsLoaded` there would return a promise that resolves once the big image is loaded.
Note: using [render blocking](https://developer.chrome.com/docs/web-platform/view-transitions/cross-document#render-blocking) for this does not work, as that only blocks rendering until the parser has found the presence of the element with that id – it does not block rendering until the resource has (sufficiently) loaded.
--
GitHub Notification of comment by bramus
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/13013#issuecomment-3820643460 using your GitHub account
--
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config
Received on Thursday, 29 January 2026 21:59:08 UTC