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?

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.