Esta pregunta está relacionada con estos 2:
1.css: aplicar el relleno al cuadro con desplazamiento, el relleno inferior no funciona
2.El relleno inferior no funciona en el elemento de desbordamiento en navegadores que no son de Chrome

Pero no encontré en ningún lugar por qué sucede, es decir, por qué en Chrome (31) y Opera (18) aparece el relleno, y en Firefox (26) e IE (9-10) no es así.

Aquí está mi caso de prueba:
http://jsfiddle.net/eW39h/4/

Un ejemplo más simple de la pregunta relacionada # 1:
http://jsfiddle.net/rwgZu/

<div id="container">
    <div id="innerBox"></div>
</div>

#container {
    padding: 3em;
    overflow-x: hidden;
    overflow-y: auto;
    width: 300px;
    height: 300px;
    background: red;
}

#innerBox{
    height: 400px;
    background: #000;
}

Realmente no estoy buscando una solución, pero para entender cuál es exactamente la implementación correcta (y qué navegadores se equivocaron :-)).

EDITAR Dic 18, 2013

Basado en la respuesta de Marc Audet, busqué en las especificaciones e hice un nuevo caso de prueba.
http://jsfiddle.net/rwgZu/79/

Aquí es evidente que todos los navegadores recortan el cuadro de desbordamiento en el mismo punto, que es el borde de relleno ", que de hecho está de acuerdo con la especificación:

Cuando se produce un desbordamiento, la propiedad 'desbordamiento' especifica si un cuadro se recorta al borde de relleno

Y aún así, en Chrome hay un relleno adicional después de la caja interior.

Sin embargo, es interesante que agregar contenido desbordado dentro de la caja interna lleva a resultados unificados en todos los navegadores:
http://jsfiddle.net/uPY8j/1/

No pude encontrar en las especificaciones las reglas para este tipo de condiciones, por lo que estoy dejando la pregunta aún abierta por ahora.