Understanding why pure CSS parallax effect works with div, but not body tag?

Question

I am trying to understand the Pure CSS Parallax effect Keith Clark demonstrates on his website in this article.

Take these two jsFiddles: CSS Parallax with div and CSS Parallax with body.

The first one works as described, the second one does not - and no parallax effect occurs. The only difference between these two documents is that the first one lacks an intermmediatary div.parallax tag with the following properties:

.parallax {
      perspective: 1px;
      height: 800px;
      overflow-x: hidden;
      overflow-y: auto;
      background-color:rgba(0,0,0,0.25);
 }

While the second one removes this tag and adds the above styles to the body:

body {
      perspective: 1px;
      height: 800px;
      overflow-x: hidden;
      overflow-y: auto;
      background-color:rgba(0,0,0,0.25);
 }

Can anyone tell me why this occurs? Why do I need a seemingly redundant tag in my document for this effect to occur? Why can't the body element act as the div.parallax container element?

Tucket

You really ought to put the CSS in jsFiddle's CSS panel and remove the boilerplate markup, otherwise it's pretty pointless to host the code there when it's all just one self-contained HTML document. – Holy

Answer 1

This is because the values for overflow on the body are transferred to the root element, leaving the body with the default overflow: visible and breaking the transform. See this section of the spec.

Setting overflow: hidden on the root element will prevent this behavior and allow the body to function as the container.

Holy

Awesome. Thank you for this. – Paraformaldehyde