Re: padding lost in overflow

On Thu, Jan 9, 2014 at 5:57 PM, Mats Palmgren <mats@mozilla.com> wrote:
> On 01/09/2014 10:33 PM, Ojan Vafai wrote:
>> [...]
>
>> Gecko and IE8+: Padding on the bottom and right get lost.
>
>
> No, the padding is there, you just don't see it because it's
> overlapped by the inner DIV in your example.
>
> Perhaps it helps to think about what happens if you change
> overflow:scroll in your example to overflow:hidden --
> note that no content is clipped by that...
>
> Now change it to overflow:auto -- are you suggesting there
> should be scrollbars in this case?  even though no content
> were clipped?
>
> We fixed Gecko because the old rendering violates the
> Box Model:  http://www.w3.org/TR/CSS2/box.html
> and 11.1:
> http://www.w3.org/TR/CSS21/visufx.html#overflow-clipping
>
> FWIW, I find the spec and the current layout in Gecko to be
> entirely logical and consistent.

Hm, I don't buy it as logical.  overflow:scroll is *not* just
"overflow:visible, but we don't show the overflow and instead you can
scroll to it".  In particular, the background is extended to cover the
entire scrollable area.

So, the background is clearly laid out "as large as the contents",
because it's inside the scrollable area.  The border is clearly laid
out "as large as the container", because it's outside the scrollable
area.  The padding is inside the scrollable area, but is laid out at
the place it would have in the container, rather than responding to
the contents?  That's just confusing (and likely why authors keep
getting confused).

It seems more logical to lay out the contents normally, as if you were
doing overflow:visible, then grow the content box to fully contain the
contents, and wrap the padding box around that as normal.  The first
part is what we do already; it's really weird that the content box is
allowed to overflow the padding box.

~TJ

Received on Friday, 10 January 2014 22:25:11 UTC