CSS: overflow/padding handling is broken in all browsers.

Consider this style definition:

div {
  width: 400px;
  height: 400px; 
  padding: 400px;
  overflow: scroll;
  box-sizing: border-box; /* sic! */
}

Note that box-sizing property above. It instructs the browser that outer edge of border box of the element should have 400x400px dimensions. But that is not so in all major browsers even all of them support box-sizing property.

Here is the demo of the problem that you can try in your favorite browser.

It appears as all browsers follow the bug made by “leading” browser engine. The behavior is against the specification, or rather the specification lacks definition of such “dusty corner”.

This essentially makes paddings useless in scrollables in browsers.

In Sciter v.4.3.0.22 I’ve fixed the problem by introducing implicit “content paddings”:

So padding property in overflow: auto | scroll | scroll-indicator
a) defines content paddings and so
b) those paddings are parts of scrollable content.

I’ve tried to discuss the problem at W3C but seems like neither Chrome nor Mozilla people are interested in fixing that so far.