Re: [csswg-drafts] [css-conditional][css-anchor-position][scroll-animations] Snapshotting post-layout State (#10796)

The CSS Working Group just discussed `[css-conditional][css-anchor-position][scroll-animations] Snapshotting post-layout State`, and agreed to the following:

* `RESOLVED: run snapshot post-layout state steps`
* `RESOLVED: add it to cssom-view`

<details><summary>The full IRC log of that discussion</summary>
&lt;kbabbitt> futhark: there are multiple specs that do some sort of snapshotting of particular scroll state<br>
&lt;kbabbitt> ...some specs try to specify this timing and some have not<br>
&lt;kbabbitt> ...for scroll driven animations there is a spec that refers to the HTML spec<br>
&lt;kbabbitt> ...that scroll position is snapshotted in the HTML ? at the begining of the animation<br>
&lt;kbabbitt> ...there's a separate snapshotting that happens after resize observers<br>
&lt;kbabbitt> ...in order to have a stable first frame and avoid flickering<br>
&lt;kbabbitt> ...then there is the anchor positioning spec that emilio pointed out<br>
&lt;kbabbitt> ...that has an issue to specify when this scroll position / adjustment snapshotting happens<br>
&lt;kbabbitt> ...now we're working on state queries and I need the exact same thing for sticky pos state queries<br>
&lt;kbabbitt> ...in this issue I propose we try to unify scroll snapshotting to a common point<br>
&lt;kbabbitt> ...instead of referring to modified HTML ? from CSS spec<br>
&lt;kbabbitt> ...the CSS specs that need to do snapshotting can say it needs to be done during these steps in CSS<br>
&lt;kbabbitt> ...what I propose is that we introduce a new step called run snapshot<br>
&lt;TabAtkins> "run snapshot post-layout state steps"<br>
&lt;kbabbitt> ... do this between media query and ??<br>
&lt;kbabbitt> ...basically aligns with where scroll animations spec specifes to do it<br>
&lt;kbabbitt> ...and then update the snapshots again and if the snapshots have changed beacuse of layout change, there is a second run of style and layout<br>
&lt;emilio> q+<br>
&lt;TabAtkins> s/??/update animations/<br>
&lt;kbabbitt> ...that is my proposal<br>
&lt;Rossen4> ack futhark<br>
&lt;Rossen4> ack emilio<br>
&lt;kbabbitt> emilio: first, why do we need two steps?<br>
&lt;kbabbitt> ...could we do it as part of the resize observer step<br>
&lt;kbabbitt> ...do content visibility stuff to prevent unstable frame issue<br>
&lt;kbabbitt> .<br>
&lt;kbabbitt> ...I think that would be nice because you wouldn't need resize observer updates<br>
&lt;kbabbitt> futhark: right, that is actulaly what the current chrome implementation does<br>
&lt;kbabbitt> I talked to flackr and he said dieally in terms of the specification have it after the resize steps<br>
&lt;kbabbitt> flackr: it's fairly common that devs use resize observer to change the shape of something on screen<br>
&lt;kbabbitt> ...you expect that these things that respond to scroll or anchoring or other things to be able to anchor to the content or the size based on developer ?<br>
&lt;kbabbitt> emilio: the loop is basically: update style and layout, then figure out ??, then figure out for resize observers wehtehr something's changed<br>
&lt;kbabbitt> emilio: if you ? you would potentially run multiple layout loops<br>
&lt;kbabbitt> emilio: and you could make it so that you ? resize observations probably<br>
&lt;kbabbitt> flackr: I agree and that's probably better, you could have resize observers respond to updated snapshot<br>
&lt;kbabbitt> emilio: other question is why do we need snapshot at beginning?<br>
&lt;kbabbitt> flackr: usually the scroll position doesn't change and you need to do some layout in your initial pass<br>
&lt;kbabbitt> flackr: so in the case where the thing that you're responding to hasn't changed as a result of scrolll, we onlyl have one pass through style and layout<br>
&lt;kbabbitt> flackr: whereas if you did it after you'd always have second pass<br>
&lt;kbabbitt> flackr: [missed]<br>
&lt;kbabbitt> flackr: and unless the result of running that caused scroll position to change, you have your result<br>
&lt;kbabbitt> emilio: you are doing the thing right after scroll events get sent<br>
&lt;kbabbitt> ...but you have no guarantee that you have updated layout here right?<br>
&lt;kbabbitt> ...and you would snapshot a potentially dirty tree or you would run layout there<br>
&lt;emilio> https://html.spec.whatwg.org/multipage/webappapis.html#event-loop-processing-model<br>
&lt;kbabbitt> emilio: proposal is iintroducing a step right after step 10 [in link above]<br>
&lt;kbabbitt> futhark: yes, that was our proposal, inspired by scroll animations spec<br>
&lt;kbabbitt> emilio: but you either run layout there, in which case it's not more efficient, or just snapshot ?<br>
&lt;kbabbitt> flackr: but there is a known scroll position at the least<br>
&lt;kbabbitt> ...I guess you're saying some of these things could have snapshot there<br>
&lt;kbabbitt> emilio: in order to get consistent bejavior and not depend on... you would get different behavior if a media query change had updated layout versus not which seems bad<br>
&lt;kbabbitt> ....so to get consistent behavior you need to update style and layout before doing snapshot<br>
&lt;kbabbitt> flackr: other reason to run at this time is I believe it's before rAF callbacks<br>
&lt;kbabbitt> emilio: no, it's after<br>
&lt;kbabbitt> emilio: nm, it's before<br>
&lt;kbabbitt> flackr: this also puts things in a correct animation state which is good for scroll driven animations<br>
&lt;kbabbitt> ...your animations are based on the correct input state<br>
&lt;kbabbitt> ...would be open to moving that around<br>
&lt;kbabbitt> emilio: if we put it before the update animations and send events you also need to update style &amp; layout<br>
&lt;kbabbitt> ...that seems promising because rAF is something people use to move content around<br>
&lt;kbabbitt> ...so you want to update style &amp; layout as late as possible<br>
&lt;kbabbitt> flackr: I think it might be okay to remove that early snapshot<br>
&lt;kbabbitt> emilio: that would be great because then snapshot the right thing, resize observer can react properluy<br>
&lt;kbabbitt> emilio: update events or animations can ? that snapshot<br>
&lt;kbabbitt> emilio: other than anchor positioning where the snapshot doesn't affect what the page can observe ...<br>
&lt;kbabbitt> flackr: I suppose if you had a rAF observer that was looking at the position of an anchor element, that observatio nwould forcea style and layout to make it correct<br>
&lt;kbabbitt> emilio: you would use the snapshot from your last frame<br>
&lt;kbabbitt> flackr: then it would be a correct ?<br>
&lt;kbabbitt> emilio: potentially<br>
&lt;kbabbitt> futhark: [missed]<br>
&lt;kbabbitt> emilio: yes and that's unfortunate because it causes inconsistent behavior if someone has updated style &amp; layout before<br>
&lt;kbabbitt> ...anything that changes frame that updates style &amp; layout causes different offsets<br>
&lt;kbabbitt> futhark: we use information from last frame<br>
&lt;kbabbitt> emilio: not necessarily, you use info from last layout update<br>
&lt;kbabbitt> futhark: should be information from ?<br>
&lt;kbabbitt> emilio: would prefer to move this only to resize observer, then you get that behavioor automatically<br>
&lt;kbabbitt> ...without changing depending on whether someone has updated ?<br>
&lt;kbabbitt> ...the whole frame sees the updated offsets until the resize observer<br>
&lt;kbabbitt> flackr: right, it makes these scroll dependent queries basically equivalent to a developer observer<br>
&lt;kbabbitt> emilio: if we decided that we need for some reason after the offsets from before rAF then I think we should update style &amp; layout to be consistent<br>
&lt;kbabbitt> ...that's unfortunate<br>
&lt;kbabbitt> futhark: there are a couple of things I'd like to resolve on regardless of orderting<br>
&lt;kbabbitt> ...creating this new run steps where we collect all these kinds of snapshotting in the same space for CSS specs<br>
&lt;kbabbitt> emilio: think that's great<br>
&lt;kbabbitt> futhark: strictly this forum cannot decide the order of the HTML event loop<br>
&lt;kbabbitt> ...but creating that step is one resolution I'd lie to make<br>
&lt;kbabbitt> ...propose CSSOM-view for it<br>
&lt;kbabbitt> Rossen4: back to first resolution which is adding this step for snapshotting<br>
&lt;kbabbitt> ...is there anything else we need to discuss about it?<br>
&lt;kbabbitt> ...not sure if there was agreement<br>
&lt;kbabbitt> flackr: I think we have agreement, I think this is okay to draft<br>
&lt;kbabbitt> ...my only concern is things devs to in rAF<br>
&lt;kbabbitt> ...but that's also a problem with anything they do in resize observers<br>
&lt;kbabbitt> emilio: already the case if author has updated layout manually<br>
&lt;kbabbitt> flackr: I do think that case is less common, still common but majority of updates are scroll with no dirty layout<br>
&lt;kbabbitt> emilio: in that case we're observing a dirty tree because you haven't done layout yet<br>
&lt;kbabbitt> flackr: if the animation time is updated according to the new scroll position, then a rAF observing some style or layout property will force an update, getting the correct for now position<br>
&lt;kbabbitt> Rossen4: back to resolution, any objections?<br>
&lt;futhark>  “run snapshot post-layout state steps”<br>
&lt;kbabbitt> RESOLVED: run snapshot post-layout state steps<br>
&lt;kbabbitt> Rossen4: second part was figuring out where this should go<br>
&lt;kbabbitt> ...was suggested to put in cssom-view<br>
&lt;kbabbitt> futhark: that's kind of arbitrary based on where scroll steps were<br>
&lt;kbabbitt> emilio: seems fine to me<br>
&lt;kbabbitt> RESOLVED: add it to cssom-view<br>
&lt;kbabbitt> futhark: the rest here is really WHATWG's HTML spec change<br>
</details>


-- 
GitHub Notification of comment by css-meeting-bot
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/10796#issuecomment-2379885032 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Friday, 27 September 2024 19:00:46 UTC