Re: padding lost in overflow

On Thu, Jan 9, 2014 at 5:46 PM, Robert O'Callahan <robert@ocallahan.org>
 wrote:

> I agree this can be confusing, but the Webkit behavior of pushing
> bottom-padding down below the bottom of the children is also confusing.
> It's also ill-specified because you'll have to specify exactly what the
> "bottom of the children" means. It's also inconsistent to move the
> bottom-padding down but not move the right-padding right.
>

Yup. That's why I'd like to change Blink to match the IE7 behavior of
showing the padding on all four sides if overflow != visible.

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...
>

I see what your saying. The Gecko rendering makes a bit more sense to me
when I consider the overflow:visible case.


> Now change it to overflow:auto -- are you suggesting there
> should be scrollbars in this case?  even though no content
> were clipped?
>

Yes.


> 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.
>

overflow:auto/scroll/hidden already do something different than
overflow:visible in all browsers. The background of the container div gets
expanded out to the edge of the overflow.

I can now see the mental model in which the Gecko behavior makes sense, but
I don't think that's the one that most web developers have in their heads.
It certainly has surprised everyone I've shown this example to.

/Mats
>
>
> > [...]
>
> > <style>
> > #scrollable {
> >      padding: 100px;
> >      overflow: scroll;
> >      background: green;
> >      height: 200px;
> >      width: 200px;
> > }
> > #item {
> >      width: 300px;
> >      height: 300px;
> >      background: red;
> > }
> > </style>
> > <div id="scrollable">
> >      <div id="item"></div>
> > </div>
>
>