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>