Re: [csswg-drafts] [css-overflow-3] Clarify padding-bottom in overflow content

The Working Group just discussed `padding-bottom in overflow content`, and agreed to the following resolutions:

* `RESOLVED: Require that you leave space in scroll containers for block-end padding in the scrollable area`
* `RESOLVED: Undo the previous resolution and continue to figure out a whole model.`

<details><summary>The full IRC log of that discussion</summary>
&lt;dael_> Topic: padding-bottom in overflow content<br>
&lt;dael_> github: https://github.com/w3c/csswg-drafts/issues/129<br>
&lt;fantasai> https://github.com/w3c/csswg-drafts/issues/129<br>
&lt;dael_> fantasai: Issue was filed by frustrated devs where if they have an element with overflow scroll and it has padding and if the content overflows the padding is useless.<br>
&lt;dael_> TabAtkins: I'm one of these web authors.<br>
&lt;dael_> fantasai: Chrome includes that padding at the bottom. Request is everyone matches Chrome.<br>
&lt;dael_> emilio: One the spec issue there's a refrence to an old Mozilla bug.<br>
&lt;dael_> fantasai: I'm not sure spec is clear on what happens.<br>
&lt;dael_> TabAtkins: Prob not wrong that Moz thinks it's spec complient, I just think it's wrong. Everyone does it a little different.<br>
&lt;dael_> TabAtkins: There's a difference between block overflow and inline overflow.<br>
&lt;dael_> fantasai: I don't htink we can solve this all. And I think it'll be undefined for a while. but biggest pain point is the padding-bottom on the overflow container. Idea is to fix that one in a way to make web authors happy.<br>
&lt;fantasai> http://software.hixie.ch/utilities/js/live-dom-viewer/?saved=5907<br>
&lt;dael_> fantasai: Since Chrome has shipped for a while we can be sure it's fairly compat. There's a test case ^ You can see Chrome has padding at the bottom and FF has none.<br>
&lt;dael_> TabAtkins: Use case: I am a blog post editor and I want the text editor behavior where I can scroll the bottom text to a reasonable region to read it.<br>
&lt;dael_> fremy: Reasonable.<br>
&lt;dael_> dbaron: Would be nice to spec something simple. Given there's incompat there's a simple thing that can be close to what current browsers do.<br>
&lt;dael_> fantasai: My current proposal is to leave padding and margin in general and say padding you have to leave space at the bottom.<br>
&lt;dael_> astearns: You're asking for a targeted fix and dbaron wants a general fix.<br>
&lt;dael_> TabAtkins: Would it be bad to resolve this and then try and resolve inline. It's a more complicated space.<br>
&lt;dael_> dbaron: I'd like to resolve we intend to change inline even thought we don't know how to do it.<br>
&lt;dael_> fantasai: It's possible for web compat we can't fix inline and even if tha'ts the case I think it's reasonable to try and fix this. General usability of CSS we should make this work.<br>
&lt;dael_> TabAtkins: When we nail down inline padding at least 2 browsers will have to change.<br>
&lt;dael_> dbaron: People care more about block because they scroll in that directio more.<br>
&lt;dael_> fantasai: And throwing in block axis overflow with scrolling is less unexpected.<br>
&lt;dael_> fantasai: I would like to include as much of margins and padding in the overflow areas butwe have the case of will this trigger scrollbars where it's not expected.<br>
&lt;dael_> fantasai: Since we don't have a web compat constraint with bottom padding I think we should do that.<br>
&lt;dael_> astearns: Prop: Require that you leave space in scroll containers for block-end padding?<br>
&lt;dael_> TabAtkins: Cool.<br>
&lt;dael_> astearns: Add a note saying like to enforce for inline padding, but not sure if we can for web compat.<br>
&lt;dael_> fantasai: We'll file another issue on that.<br>
&lt;dael_> astearns: Okay dbaron ?<br>
&lt;fantasai> testcase for inline-end padding http://software.hixie.ch/utilities/js/live-dom-viewer/?saved=5908<br>
&lt;dael_> astearns: I guess so.<br>
&lt;dael_> s/astears/dbaron<br>
&lt;dael_> dbaron: I think we used to do that and changed to compat with spec. Spec is quite clear that's what you do. Nothing to imply you should move padding.<br>
&lt;fantasai> Looks like Chrome includes padding-inline-end http://software.hixie.ch/utilities/js/live-dom-viewer/?saved=5908<br>
&lt;dael_> myles: I talke dto hyatt and he said he did it because it was symmetrical and looked better.<br>
&lt;dael_> myles: In webkit.<br>
&lt;dael_> myles: I think webkit.<br>
&lt;dael_> astearns: Objections?<br>
&lt;dael_> fantasai: I'd be happy to resolve for inline too.<br>
&lt;dael_> myles: I think we should do both.<br>
&lt;dael_> fantasai: Okay.<br>
&lt;dael_> astearns: Resolve and then talk inline or block?<br>
&lt;fantasai> s/too; just don't want to hold up block-end/<br>
&lt;dael_> myles: no preference<br>
&lt;dael_> astearns: Resolve for just block. Obj?<br>
&lt;dael_> RESOLVED: Require that you leave space in scroll containers for block-end padding in the scrollable area<br>
&lt;dael_> astearns: Do we also require space fo inline padding because consistency is nice.<br>
&lt;dael_> fantasai: There's a test case above in IRC: http://software.hixie.ch/utilities/js/live-dom-viewer/?saved=5908<br>
&lt;dael_> emilio: Is that compat?<br>
&lt;dael_> TabAtkins: Chrome puts padding on all the sides.<br>
&lt;dael_> astearns: Same argument applies. If Chrome has been doing it for so long. Can you see if there are bugs on extra unexpected scrollbars?<br>
&lt;dael_> myles: When would the scrollbars not appear?<br>
&lt;rune_> https://bugs.chromium.org/p/chromium/issues/detail?id=724697&amp;q=padding%20scrollable&amp;colspec=ID%20Pri%20M%20Stars%20ReleaseBlock%20Component%20Status%20Owner%20Summary%20OS%20Modified<br>
&lt;dael_> rune_: Bug report ^<br>
&lt;dael_> TabAtkins: It's a spec bug.<br>
&lt;dael_> rune_: Yeah, it's not compat.<br>
&lt;dael_> myles: Same argument applies<br>
&lt;dael_> astearns: And fremy agreed.<br>
&lt;dael_> astearns: dbaron wanted consistancy.<br>
&lt;dael_> astearns: Objections to Use same space saving for inline-padding?<br>
&lt;dael_> koji: It's a block inline<br>
&lt;dael_> fantasai: padding on scroll container itself. Everything else is undefined.<br>
&lt;dael_> TabAtkins: From test case in bug, we do apply padding if it's inline content that overflows, but not if it's a block causing the overflow. If the block is inline overflowning no padding, but the text you do.<br>
&lt;dael_> myles: Same as my comment.<br>
&lt;dael_> TabAtkins: I didn't realize we did that as well.<br>
&lt;dael_> astearns: Maintain that?<br>
&lt;dael_> TabAtkins: No.<br>
&lt;dael_> astearns: Worried if you don't?<br>
&lt;dael_> fantasai: I have concerns but I won't block.<br>
&lt;fantasai> s/concerns/concerns about web compat/<br>
&lt;dael_> dbaron: Apply to content nested arbitrarily deep? You're propagating 2 versions to know if it's block or inline overflow?<br>
&lt;dael_> myles: I think the answer is no, just children.<br>
&lt;dael_> TabAtkins: No, it looks as far down as you want to know.<br>
&lt;fantasai> o_O<br>
&lt;dael_> astearns: Prop: Preserve space allocated by inline-end padding on the scroll container<br>
&lt;dael_> fantasai: Dunno abspos.<br>
&lt;dael_> myles: No browser does that. Scary.<br>
&lt;dael_> TabAtkins: It's close to blink and chrome<br>
&lt;dael_> dbaron: Inlines you add the padding and blocks you don't?<br>
&lt;dael_> myles: yes<br>
&lt;dael_> TabAtkins: Presumably difficulty of reading text flush with edge was the reason.<br>
&lt;dael_> dbaron: But then why not blocks?<br>
&lt;dael_> TabAtkins: Blocks aren't text.<br>
&lt;dael_> TabAtkins: Clarifiation. Inline content has to be a direct shild.<br>
&lt;dael_> myles: Toggle looks at just the chilred.<br>
&lt;dael_> dbaron: Inline inside a block child you don't apply<br>
&lt;dael_> dbaron: I think applying all the time is good, but I'd rather leave as is then keeping the inlive vs block.<br>
&lt;dael_> astearns: You don't want the chrome/webkit current.<br>
&lt;dael_> dbaron: Right.<br>
&lt;dael_> fantasai: Clarification to previous resolution doesn't apply to abspos. Because that's what impl and it makes more sense. abspos is positioned with respect to padding edge.<br>
&lt;dael_> myles: So it's abspos and you say padding:0 it's now underdefined.<br>
&lt;dael_> fantasai: Previous resolution the padding is added to inflow contents.<br>
&lt;dael_> dbaron: Can you make inside of a scrollable area be abspos or only outside?<br>
&lt;dael_> fantasai: If I do abs something and the scroll container is relpos I can scroll.<br>
&lt;dael_> dbaron: Per spec it should be relative to height without scroll but I'm not sure that's what people implement.<br>
&lt;dael_> dbaron: Adjusted by size of scrollbars if you have to adjust for that.<br>
&lt;dael_> fantasai: Bottom edge of the abspos position container does not include the overflowing content. If the thing does overflow then things are weird.<br>
&lt;fantasai> s/are weird/are drawn below that boundary/<br>
&lt;dael_> TabAtkins: In chrome assuming scroll container is abspos and is right0 bottom0 the abspos is int he bottom right.<br>
&lt;dael_> dbaron: Befor eyou scroll<br>
&lt;dael_> dbaron: If it's causing the overflow do you scroll?<br>
&lt;dael_> fantasai: YOu only add the padding to the inflow content.<br>
&lt;rego> check chromium behavior in: https://www.software.hixie.ch/utilities/js/live-dom-viewer/?saved=5909<br>
&lt;dael_> dbaron: But if a child of the scroll container is relpos but it has children that are bspos do you scroll?<br>
&lt;dael_> saDo abspos children of relpos contribute to the overflow characteristics of it's parent?<br>
&lt;dael_> dbaron: That's how we impl.<br>
&lt;dael_> TabAtkins: e do not add padding if the abspos is the overflowing.<br>
&lt;dael_> dbaron: Now for abspos you need to track this deep.<br>
&lt;dael_> fantasai: When you calc height of box and you scroll to the last thing that's inflow and you add padding bleow that thing, that's your direct child. There may be a deep nested thing.<br>
&lt;dael_> dbaron: Gecko used to do that but that's different then what I think we're saying. The other difference is if you have a scroll container and has an explicit height container and that overflows, do you add padding there.<br>
&lt;dael_> fantasai: Don't think so.<br>
&lt;dael_> fremy: Made a test case and it's worse then that.<br>
&lt;dael_> fantasai: As an author I don't expect an abspos to respect the padding but I do expect things inflow remain inside the mat that's around it.<br>
&lt;dael_> dbaron: You're changing the model. I thought model was you have overflow, add padding around that, and then you overflow.<br>
&lt;dael_> fantasai: Then we added abspos.<br>
&lt;dael_> dbaron: But I think my model is simple. You figure out what hte scrollable overflow area of all descendents is and then you add the padding and that's the area you add the scroll to.<br>
&lt;dael_> dbaron: abspos children are relative to the padding as if inside the viewport and then those are placed in the scrollable area which is prob on top of where it was befor ein the viewport.<br>
&lt;dael_> dbaron: This is what gecko impl and dev don't like.<br>
&lt;dael_> myles: In this model somet higns are inside the viewport.<br>
&lt;rego> this is the output of my example before: https://i.imgur.com/PQZ775X.png (edge behaves like firefox and webkit like chromium)<br>
&lt;dael_> florian: I'm not disputing this may be nice, but doesn't that cause oveflow where you don't expect it? Spec I believe that creating scrollbars too often is why chrome only does it in some cases because it would make scrollbars everywhere which people hate.<br>
&lt;dael_> fantasai: dbaron problem with your model is I have a positionrelative scroll container I put an abspos in the bottom right in your model it triggers padding. If the padding is 2em then we add 2em padding and create all this scrolling.<br>
&lt;dael_> dbaron: I buy that for abspos positioned reltaive tot he scroll container. I don't for things relative inside the scroll container.<br>
&lt;dael_> fantasai: Okay.<br>
&lt;dael_> dbaron: Did we test that?<br>
&lt;dael_> florian: Are you not worried that it would create lots of scrollbars?<br>
&lt;fantasai> http://software.hixie.ch/utilities/js/live-dom-viewer/?saved=5910<br>
&lt;dael_> dbaron: I'ts worrying. An actual proposal with details would be good before resolve.<br>
&lt;dael_> fantasai: test case dbaron proposed ^<br>
&lt;dael_> dbaron: You can't scroll to the thing at all<br>
&lt;dael_> astearns: I'm worried you said this is what we used to do and dev hated.<br>
&lt;dael_> dbaron: I't sbecause it's not what spec said to do and partly becaues dev said it didn't yield expected but it does work as expected in the other case where we were wonrg<br>
&lt;dael_> astearns: We need to come up with a proposal for how to deal with scroll cotnainer padding and then evaluate the full proposal with spec text.<br>
&lt;dael_> astearns: Ammend preious resolution to say we will try to define a way to make scroll padding work in block and inline for all cases in a way that breaks the web.<br>
&lt;dael_> fantasai: If previous is inflow content I think we're scoped okay.<br>
&lt;dael_> myles: Not if we're doing investigation. You're doing 1/4 of the issue.<br>
&lt;dael_> fantasai: But people want this 1/4 to work and that's web compat.<br>
&lt;dael_> fremy: If we don't have a model that's clear we'll impl and then re-impl.<br>
&lt;dael_> myles: Agree it's wasted work.<br>
&lt;dael_> astearns: I suggest that we draft the whole model and the portion that's easy and see if it makes sense to do the easy part first.<br>
&lt;dael_> astearns: I think we need spec text first.<br>
&lt;dael_> florian: Mostly sounds good to me. I thought in previous discussions someone from blink stated that they're only extending padding in some cases is because it's not web compat.<br>
&lt;dael_> TabAtkins: It's not written anywhere to [i don't know noise]<br>
&lt;fremy> http://software.hixie.ch/utilities/js/live-dom-viewer/saved/5911<br>
&lt;fremy> ^ testcase with abspos in inline relative<br>
&lt;dael_> fantasai: Some of these cases will be exporatory to figure out what's web compat.<br>
&lt;TabAtkins> s/to [i don't know noise]/and I don't remember it, so iunno./<br>
&lt;dael_> astearns: Prop: Undo the previous resolution and continue to figure out a whole model.<br>
&lt;dael_> RESOLVED: Undo the previous resolution and continue to figure out a whole model.<br>
</details>


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

Received on Thursday, 12 April 2018 14:02:36 UTC