Comments (7)
The flow goes like this:
- author calls
document.startViewTransition
- wait for next frame
- During frame rendering, set suppression to true (https://drafts.csswg.org/css-view-transitions-1/#setup-view-transition 3)
- Queue a task to call the author's update callback (https://drafts.csswg.org/css-view-transitions-1/#setup-view-transition 4.2)
- Once the update callback resolves, we activate the transition (https://drafts.csswg.org/css-view-transitions-1/#call-the-update-callback 6.1)
- Activating the transition sets the suppression to false (https://drafts.csswg.org/css-view-transitions-1/#activate-view-transition 2)
- In the next frame, which would no longer be suppressed, we animate the frames (https://drafts.csswg.org/css-view-transitions-1/#handle-transition-frame)
So in essence, activating the transition doesn't necessarily happen in "perform pending transition operations", so it won't be blocked by the suppression flag. The suprression is to freeze the rendering while the new state is updating during the course of the author provided update callback.
Happy to discuss/clarify this further.
from html.
from html.
Tangentially related concern from @mattwoodrow :
Might be worth some more spec clarification though, since it clearly asks for a 'live' snapshot, but also is suggesting that we'd block animations from running. It seems somewhat weird to me that using JS to edit styles while a VT is running would show up, but using a transition/animation (outside of the VT animation that is) would not.
from html.
from html.
Ah thanks. I think confusion came from the fact that the first definition you see in the CSS spec for "rendering suppression for view transitions" mentions redirecting hit-testing, which I (sensibly?) assumed would be done the duration of the whole view transition.
Perhaps the concept could be renamed to detail more precisely why rendering is being suppressed in the context of VT
from html.
@noamr @khushalsagar What is this rendering suppression supposed to avoid?
from html.
It ensures the browser is not rendering frames while the author is asynchronously updating the DOM to the new state.
from html.
Related Issues (20)
- [rendering] animation frame callback handling when iframes are involved HOT 23
- "On platforms where Esc is the close request, the user agent will first fire an appropriately-initialized keydown and keyup event sequence" is confusing HOT 1
- [parsing] "adoption agency algorithm" ambiguity HOT 2
- Error reporting in HostEnqueuePromiseJob is not specified nor interoperable HOT 1
- Errors when attaching a declarative shadow root HOT 13
- image.decode() interacts weirdly with the sync cases in "update the image data" HOT 10
- Silence Jake diagram conformance warnings on CI
- Discussing how to focus navigate display: contents elements that are focusable in CSS reading-flow HOT 5
- Upcoming WHATNOT meeting on 2024-08-01 HOT 1
- Example in parallelism section needs to "queue a task" to handle the promise
- Meeting 5 for joint OpenUI-WHATWG/HTML-CSSWG task force on styleable form controls HOT 4
- Allow explicitly indicating an `unchecked` state for an `<input type="checkbox">`. HOT 3
- Upcoming WHATNOT meeting on 2024-08-08 HOT 1
- Discussing how to focus navigate absolute position elements that are focusable in CSS reading-flow
- Rationale for when invalid value default differs from missing value default HOT 9
- Chinese Translation of HTML Standard Completed HOT 3
- Script element schematic diagram for async/defer is not readable in dark mode HOT 6
- inconsistent input label `:active` and `:hover` behavior HOT 1
- Document "can have its URL rewritten" incorrectly rejects file:// URL with only query changed HOT 4
- HTMLConstructor construction steps: Incorrect exception specified in step 11. HOT 3
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from html.