padding lost in overflow

Browsers are inconsistent in how they render padding in overflow.

IE7: Padding shows up on all sides.
Gecko and IE8+: Padding on the bottom and right get lost.
Blink/WebKit: Padding on the right gets lost.

Apparently Gecko used to render like Blink/WebKit, but was changed to match
the CSS2.1 spec: https://bugzilla.mozilla.org/show_bug.cgi?id=748518. This
behavior is super confusing. Web developers don't get it (e.g.
http://stackoverflow.com/questions/17130261/overflow-scroll-with-padding-webkit-v-firefox
).

I'd like to change Blink to match IE7 rather than matching the 2.1 spec. It
makes no sense that the top/left padding take part in the scroll
height/width, but the bottom/right padding do not.

I think we should change the spec to at least match the Blink/WebKit
behavior and, if it proves to be web compatible, I'd like to match the IE7
behavior.

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

Received on Thursday, 9 January 2014 22:34:35 UTC