Re: [csswg-drafts] [css-overflow] Proposing `scroll-start`: allowing overflow scroll to not always start at 0 on 1st layout pass (#6986)

The CSS Working Group just discussed `[css-overflow] Proposing scroll-start: allowing overflow scroll to not always start at 0 on 1st layout pass`, and agreed to the following:

* `RESOLVED: Accept the proposal for scroll-start and add to scroll snap L2`
* `RESOLVED: Add argyle as a co-editor of scroll snap L2`

<details><summary>The full IRC log of that discussion</summary>
&lt;dael> Topic: [css-overflow] Proposing scroll-start: allowing overflow scroll to not always start at 0 on 1st layout pass<br>
&lt;dael> github: https://github.com/w3c/csswg-drafts/issues/6986<br>
&lt;dael> argyle: Goal, we did survey asking devs about experience in scroll. Starting to write explainers<br>
&lt;dael> argyle: Scroll-start has overlap with frag navigation conceptually. But that is more magical b/c has more work to do and integrations to things like page refresh<br>
&lt;smfr> q+<br>
&lt;dael> argyle: This wants to bring a portion of that power to move someone. Example is tabs to swipe between and want tos tart on a midway tab so it laysout at that tab<br>
&lt;dael> argyle: All solutions to do this now take extra time and additional work<br>
&lt;dael> argyle: Tucking a search bar above the fold is common. Spotify does this where you don't see search until you scroll up<br>
&lt;dael> argyle: Proposal is advocating for way to do that in css using links as default. scroll-start 20px from top. Could also use %<br>
&lt;dael> argyle: This would only apply if frag nav isn't used and user hasn't interacted with scroll. Waiting for checks listed in explainer to make sure it's untouched<br>
&lt;dael> argyle: If so on first layout layout at this position<br>
&lt;dael> argyle: Adds scroll-start:target which is where you can have a child as a target for scroll. Akin to scroll-snap where you can snap on first layout. But after that you can't scroll anywhere<br>
&lt;dael> argyle: People hack around this by setting a keyframe. Have a snap child, wait a keyframe, and then remove an animation to remove the snap so you can move<br>
&lt;dael> argyle: Offering something simple for this<br>
&lt;dael> argyle: Property on the child where child in scroll container says snap to me if user hasn't ineracted with page<br>
&lt;Rossen_> q?<br>
&lt;dael> argyle: Additional details int he proposal, but how is that for a first pass?<br>
&lt;dael> smfr: I like proposal. Useful functionality. Like that it's element-based target<br>
&lt;dael> smfr: question is if we can define first layout pass. If page toggles display none and then goes back does that trigger first layout? If the layout tree is distroyed is that first layout?<br>
&lt;dael> argyle: Nice. I hadn't articulated the proper timing. Makes sense as a request for the explainer. Thank you<br>
&lt;Rossen_> ack smfr<br>
&lt;Rossen_> ack fantasai<br>
&lt;dael> fantasai: I think the idea of doing this makes a lot of sense.<br>
&lt;dael> fantasai: Being able to choose and element and have it be focus makes sense<br>
&lt;heycam> q+<br>
&lt;dael> fantasai: Agree with TabAtkins should be property on element not scroll container<br>
&lt;dael> fantasai: Have a similar problem with baseline alignment and alining to child. 1339 issue<br>
&lt;dael> fantasai: Should make them consistent in how they lookup<br>
&lt;dael> fantasai: Makes sense overall and I support working on it<br>
&lt;flackr> q+<br>
&lt;dael> argyle: So in favor of child property but don't agree with scroll port property of scroll-start?<br>
&lt;dael> fantasai: NOt sure if we need opt in for scroller, but scroller shouldn't pick position<br>
&lt;dael> argyle: Absolutely<br>
&lt;dael> fantasai: In terms of figuring out how element aligns in port we should reuse snap. I think alignment question is handled by scrollsnap. You do h ave question of first or last element that qualifies<br>
&lt;dael> fantasai: Another interaction, content alignment can effect initial scroll position. Have to figure out how that interacts<br>
&lt;dael> argyle: Thank you. Taken notes<br>
&lt;dael> argyle: In explainer does say if parent and child both have or multiple children have snap target it has how to resolve. Currenlty first in dom<br>
&lt;dael> fantasai: Good answer. First in dom makes a lot of sense. Want to think about if an element can block it's children from participating in that<br>
&lt;dael> argyle: Thank you<br>
&lt;Rossen_> ack heycam<br>
&lt;dael> heycam: Wondering what should happen when the page is loading slowly or content is added to scroll container and first layout happens before target offset is reached. Keep reevaluating to determine if we do a scroll until condition is met?<br>
&lt;dbaron> Not just lazy addition from script, but also a large page that does the first layout of the container when only some of its content has been loaded.<br>
&lt;dael> argyle: Current mentality is this is easy to interrupt. It's a request. In case of something being lazy I would assume...say it's scroll-start:left 200px. If it did first layout and nothing has happened I would say if a scroll-start shows up later it's ignored. Scroll position is set<br>
&lt;dael> heycam: A little worried authors would test on fast connection, get desired behavior, and then publish and scroll position isn't updated so looks weird<br>
&lt;Rossen_> q<br>
&lt;dael> fantasai: I think we should use logic for [missed] and this would be the feature for how that works<br>
&lt;Rossen_> ack fantasai<br>
&lt;Zakim> fantasai, you wanted to reply to that<br>
&lt;dbaron> The logic for scrolling to targeted elements isn't very good -- I really wanted to try to improve it about 15 years ago but never got around to it. :-/<br>
&lt;fantasai> s/[missed]/scrolling to :target/<br>
&lt;dael> TabAtkins: Going to say the same<br>
&lt;chrishtr> q+<br>
&lt;dael> argyle: And point of this is prevent janka nd be there first. Misses it's mark if containing scroll port has been created and there's no children.<br>
&lt;fantasai> s/feature for/feature defining/<br>
&lt;dael> argyle: I'm assuming Java is appending, but maybe even a really long document. I'm inclined to say trying to prevent jank and we want to do it all before a user sees it<br>
&lt;dael> iank_: It's possible that your html can slowly trickle in. I think that's heycam slow connection<br>
&lt;Rossen_> ack flackr<br>
&lt;dael> flackr: I wanted to reply to smfr and heycam points. In my mind see this as substitute for assumed 0 defaults scroll. So should reapply any time we would start at position 0. Probably not same as fragmenetion because that waits<br>
&lt;dael> flackr: For css any time something introduced with scroll it shouldn't jump<br>
&lt;dael> flackr: When an element becomes a scroll container we should look for this and jump to that unless doing other frag navigation<br>
&lt;Rossen_> q?<br>
&lt;fantasai> s/fragmenetion/fragment navigation/<br>
&lt;TabAtkins> +1 to flackr's points<br>
&lt;Rossen_> ack dbaron<br>
&lt;dael> dbaron: Related to flackr just said. My opinion is frag navigation is not very good. Had plan to fix around 2007 but kept postponing<br>
&lt;dael> dbaron: Thing that happened 3 or 4 years ago that had some improvements. I would have liked to see frag nav try to scroll to frag more frequently and have astate to say if it should keep trying<br>
&lt;dael> dbaron: Not what happened and might not be web compat<br>
&lt;dael> dbaron: Maybe doing same as frag nav is okay, but I think it's not that great and could be better for users<br>
&lt;Rossen_> ack chrishtr<br>
&lt;fantasai> +1 to not specifying an offset; should choose an element, and align it based on properties in css-scroll-snap<br>
&lt;dael> chrishtr: Had a thought similar to flackr and others. What if instead of spec some default offset you spec what scroll anchor target is at the beginning. And that remains until user does something. If page takes a while to load browser knows what target should be and as it loads browser centers it on screen<br>
&lt;dael> argyle: Sounds interesting. Sound like overlap with scroll start target. Maybe target should behave as desc<br>
&lt;dael> fantasai: I think if we go with idea that scroll-snap-target aligns the same as scroll snap properties. Scroll padding and margin and align can determine the position. I think that should handle the offsets. Not sure there's a use case for offset at start not being the same as if you were targetting to the element<br>
&lt;iank_> What about for a large &lt;canvas> within a scroller where you don't have an element to target?<br>
&lt;dael> argyle: Hearing advocacy for scroll-start:target and no scroll-start b/c in general want to scroll an item into view<br>
&lt;dael> argyle: There are people that wanted keywords or end and center that are 100% or 50%<br>
&lt;Rossen_> q?<br>
&lt;dael> argyle: See what you're saying that length would be less used.<br>
&lt;TabAtkins> Agree we *sometimes* want an explicit offset.<br>
&lt;dael> argyle: Does seem like ti should be an offering. Like i know by hearder is 50 px and what to be under that<br>
&lt;smfr> maybe this should also cover the “always scrolled to the bottom“ case for chats etc<br>
&lt;dael> fantasai: You want to target the thing under the heading so that you can change the font on your heading and have it still work<br>
&lt;dael> fantasai: You can already to top of bottom with align content<br>
&lt;dael> TabAtkins: There's a use case in chat where  you can't do offset. Large canvas in a scroller<br>
&lt;dael> fantasai: Can see that. Can also see if doing fancy with canvas you want to define snap areas. more to be done with canvas<br>
&lt;chrishtr> Re large canvas: there should be a way to specify a position relative to that element<br>
&lt;dael> argyle: Another is shopping where image takes up show screen. Start with that in center and then you can pan.<br>
&lt;Rossen_> q?<br>
&lt;dael> fantasai: I believe align content is defined to do that<br>
&lt;fantasai> https://www.w3.org/TR/css-align-3/#overflow-scroll-position<br>
&lt;dael> Rossen_: Seems like have positive consensus to adopt this proposal<br>
&lt;dael> Rossen_: Sure there are details to work out<br>
&lt;dael> Rossen_: I see smfr is adding some of those to the issue<br>
&lt;dael> Rossen_: Assuming you're looking for resolution to adopt?<br>
&lt;dael> argyle: Correct. Want way forward to prototype. Have demos and stuff for scrollsnap we're hoping to add scroll start<br>
&lt;dael> fantasai: rec to draft this as level 2. it's going to work closely with properties to determine position<br>
&lt;fantasai> s/level 2/scroll snap level 2/<br>
&lt;dael> Rossen_: Prop 1: Accept hte proposal for scroll-start and add to scroll snap L2<br>
&lt;dael> Rossen_: Objections?<br>
&lt;dael> fantasai: No obj but would like to hold off on adding the offset and start with the element. Should look at use cases<br>
&lt;dael> Rossen_: If we have this in its own draft much easier to tease out issues<br>
&lt;dael> Rossen_: Didn't hear objections<br>
&lt;dael> RESOLVED: Accept the proposal for scroll-start and add to scroll snap L2<br>
&lt;dael> Rossen_: Question 2, who will do this? Do we need to add argyle as an editor?<br>
&lt;dael> TabAtkins: Good idea if he's okay<br>
&lt;dael> argyle: Happy to join in<br>
&lt;dael> Rossen_: Obj to add argyle as a co-editor of scroll snap l2<br>
&lt;dael> RESOLVED: Add argyle as a co-editor of scroll snap L2<br>
&lt;dael> argyle: Plenty more to come<br>
</details>


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


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

Received on Thursday, 3 February 2022 01:00:54 UTC