Re: [csswg-drafts] [css-overflow] add method to prevent elements from contributing to scrollable overflow (#8361)

The CSS Working Group just discussed `[css-overflow] add method to prevent elements from contributing to scrollable overflow`.

<details><summary>The full IRC log of that discussion</summary>
&lt;emeyer> iank_: Developers would like a mechanism to ignore elements from scrollable overflow<br>
&lt;emeyer> …We also heard suggestions to ignore transforms for scrollable overflow purposes<br>
&lt;flackr> q+<br>
&lt;emeyer> …I think the only blocking thing here is, what do we call this?<br>
&lt;emeyer> …It's trivial to implement<br>
&lt;astearns> ack flackr<br>
&lt;emeyer> flackr: I raised the point there are parts of overflow that are significant<br>
&lt;emeyer> …I think it makes a big different for the name whether we include those or not<br>
&lt;emeyer> …That's why I suggested overflow-box<br>
&lt;emeyer> …Do we want to include snapping scroll into view<br>
&lt;emeyer> iank_: The specific case here is that a major site, because Chrome does transforms slightly more correctly, we snap to a transformed element which isn't the correct place<br>
&lt;emeyer> …The site wants to snap to the non-transformed place<br>
&lt;florian> q?<br>
&lt;emeyer> …We're only seen this with transforms; one option is to have a different property that says to ignore transforms for a bunch of operations<br>
&lt;emeyer> astearns: My concern is that you aren't defining a box, you're defining what the box pays attention to and what it ignores<br>
&lt;emeyer> …overflow-box-contribution seems more precise<br>
&lt;emeyer> iank_: I worry people will think it refers to which box model box you're using<br>
&lt;miriam> q+<br>
&lt;emeyer> flackr: I don't care about the name that much as long as we include those additional behaviors<br>
&lt;emeyer> …We do get into cases where we use a transform and get unstab le scroll position as a result<br>
&lt;emeyer> iank_: I think we use one or two properties<br>
&lt;emeyer> …The first property would just ignore transforms for snap alignement, scroll into view<br>
&lt;florian> q?<br>
&lt;florian> q+<br>
&lt;emeyer> …The second would ignore scrollable overflow contributions completely for the element<br>
&lt;astearns> ack miriam<br>
&lt;emeyer> flackr: Should decide if that should be two properties or two values on one proeprty<br>
&lt;emeyer> miriam: How does it work what it's in flow?<br>
&lt;emeyer> …If you set it to none, and it's the last thing on an autoflow, it doesn't trigger scrollbars<br>
&lt;emeyer> …But if you have something after it, it does?<br>
&lt;emeyer> iank_: If it's in flow, the in flow padding edge wraps everything onthe top layer and will still be scrollable<br>
&lt;emeyer> …Won't remove all side effects completely, but removes direct contribution of that element<br>
&lt;emeyer> …People can abspos things somewhere and it doesn't contribute<br>
&lt;astearns> ack florian<br>
&lt;emeyer> florian: If we go with two proeprties, the one that controls taking transforms into account probably shouldn't havce the word transform in its name<br>
&lt;emeyer> …You might want the behavior for more than transforms<br>
&lt;ydaniv> how about something like `layout-box`?<br>
&lt;flackr> q+<br>
&lt;emeyer> iank_: Initially, I wouldn't want to include relpos until we get stronger signals, since it's not as cleanly separated as transforms<br>
&lt;astearns> ack dbaron<br>
&lt;emeyer> florian: Sure, I just don't want to pick a name that would preculde handling that later<br>
&lt;khush> q+<br>
&lt;emeyer> dbaron: Agreed; there are cases where people want to ignore the transform while also using features you think they want to ignore<br>
&lt;astearns> ack flackr<br>
&lt;dbaron> s/want/might want/<br>
&lt;emeyer> flackr: More complicated answer is to ignore the animated value<br>
&lt;emeyer> …That wouldn't ignore scripted cases, and would be harder to compute, but<br>
&lt;khush> q-<br>
&lt;emeyer> iank_: I've thought about that case and I don't think we want to go down that path<br>
&lt;emeyer> flackr: Agreed<br>
&lt;astearns> ack fantasai<br>
&lt;emeyer> astearns: Sounds like we're at a single proeprty with multiple values<br>
&lt;emeyer> fantasai: For relpos situations, they could use transforms, so covering that covers most cases, I think<br>
&lt;emeyer> iank_: I'm coming around to this being two properties… but we still don't have any good names<br>
&lt;emeyer> astearns: What would the two properties do?<br>
&lt;emeyer> iank_: One switches off direct scrollable overflow contribution entirely, with values like normal and none<br>
&lt;fantasai> overflow-visibility: normal | none | transforms<br>
&lt;emeyer> …The other would affect things like snap align, scroll into view ignoring transforms<br>
&lt;emeyer> astearns: And the second one, you'd still have a scrollbar?<br>
&lt;emeyer> flackr: That would also be affected by the change in interpretation<br>
&lt;emeyer> …If you said you were ignoring transitions, you wouldn't get a scrollbar to scroll to the transformed position<br>
&lt;emeyer> astearns: Ian said this wasn't about the creation of the scrollable area; the first proeprty is the one that defines that<br>
&lt;fantasai> contain: overflow? transform-overflow: normal | none?<br>
&lt;emeyer> flackr: We can treat whether we're contributing as a separate thing<br>
&lt;emeyer> astearns: Then I don't get why they need to separate<br>
&lt;emeyer> iank_: It is a separate thing<br>
&lt;emeyer> …The first covers everything, and the second says "only ignore transform"<br>
&lt;khush> q+<br>
&lt;emeyer> ydaniv: We could use 'ignore-transforms' and something like layout<br>
&lt;emeyer> fantasai: I don't understand why they need to be separate either<br>
&lt;emeyer> iank_: The second affects things like snap areas<br>
&lt;ydaniv> s/and something/or something/<br>
&lt;dbaron> s/affects/also affects/<br>
&lt;emeyer> …If you use one property, what happens if you say none and it's a snap area<br>
&lt;emeyer> …The first property only makes sense for scrollable overflow<br>
&lt;emeyer> …The second would address other things<br>
&lt;emeyer> fantasai: None of that invalidates my question<br>
&lt;emeyer> iank_: What happens to all the things what you set to none?<br>
&lt;florian> q+<br>
&lt;emeyer> flackr: What if instead of none, you have a value of clip, which means it's scrollable rect limits to the scrollable area<br>
&lt;emeyer> iank_: You might have other things, so I don't think that wil work<br>
&lt;emeyer> flackr: Let's say overflow-contribution: none, and you try to scroll to this box that hasn't contributed to scrollable area, but it isn't reachable because the scrollable area hasn't included that<br>
&lt;emeyer> iank_: I'm not sure what I would expect to happen there, so a way we could design it is it doesn't produce a snap area<br>
&lt;emeyer> …I worry, but the flip side is you might be able to see it because the padding box is big enough to see it, and what happens then?<br>
&lt;emeyer> flackr: This is why I was suggesting clipping<br>
&lt;khush> q-<br>
&lt;emeyer> iank_: I don't think that works but it's a complicated answers based in order of operations on rectangle computation<br>
&lt;astearns> ack florian<br>
&lt;emeyer> florian: It makes sense as separate properties because you'd want to set them separately at least some of the time<br>
&lt;emeyer> …You might want to say "don't show scrollbars" in one place, but in another place you say to snap to where a thing would be<br>
&lt;emeyer> …Having one reset the other might work out fine, but I'm not sure<br>
&lt;emeyer> …I lean toward separate properties<br>
&lt;emeyer> astearns: I'm not hearing consensus on how many properties there should be, so we should go back to the issue because we aren't ready to bikeshed<br>
&lt;florian> s/snap to where a thing would be/snap to where a thing would be if it weren't transformed<br>
&lt;emeyer> flackr: We should write up the alternatives and use cases so we can figure this out<br>
&lt;fantasai> scroll-visibility and transform-overflow?<br>
&lt;emeyer> iank_: That sounds fine, so folks can have a think<br>
&lt;emeyer> …We have been hearing about this in conversations with devs, so it would be good to address this<br>
&lt;fantasai> overflow-ignore: self | transforms | normal<br>
&lt;emeyer> …Handling it is pretty easy, so we just need to design it<br>
&lt;emeyer> astearns: Agreed<br>
</details>


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


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

Received on Thursday, 13 June 2024 15:43:04 UTC