CSS Parallax Background Image White Space in IE

Question

I'm using Keith Clark's CSS-only method to create a two-layer parallax effect so that the background image scrolls at a slower speed than the rest of the site's content. Just to be clear, the image covers the entire page and the content sits on top of it.

My site is divided into two main div elements (and a container div) - one for the background image, and the other for the page's content. Below is the code I was using for the different div elements.

.container {
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  perspective: 1px;
  position: absolute;
  left: 0;
  right: 0;
}

.background {
  background-image: url(images/background.jpg);
  background-size: cover;
  position: absolute;
  /* margin-bottom: -200em;
     overflow: hidden; */
  height: 200em;
  left: 0;
  right: 0;
  transform: translateZ(-2px) scale(3);
}

.page-content {
  transform: translateZ(0);
}

Without the margin-bottom and overflow properties added, the background div element would end up having vertical white space left over once it was set to a height high enough to cover all the page's content.

After adding the negative margin, the problem was fixed in Chrome and sort of in Firefox*, and I increased the height and negative margin of the div element to be much more than was required to ensure it would work for different page lengths.

IE 11 still has has the white space there though. Normally the background-size: cover; property removes any white space, but this doesn't work with the parallax effect.

Do you know of any ways to remove the white space that would work for IE9+ and other major browsers, or am I out of luck?

Here's a JSFiddle with pretty much exactly the same code as the site I'm creating.

*Firefox doesn't have white space, but the negative margin isn't working properly for all page lengths. For shorter pages you can scroll way passed the end of the page's content. I could remedy this by changing the height and margin for each page, but a global solution would be appreciated if possible.

Answer 1

I think you have a few problems if your goal is to make this work on IE9. This works for me, but not without increasing the size height of the .back div.

This works for me in IE9 and Chrome, but you may just want some IE conditionals.

http://jsfiddle.net/Lawrg9mv/21/

Additions:

.back {
    height: 80em; 
    -ms-transform: translateZ(-2px) scale(3);
}

.front {
    -ms-transform: translateZ(0);
    z-index: 10;
    position: relative;
}