Search code examples
htmlcssparallax

Pure parallax effect not working space on the left side

I have a strange problem with the pure css parallax effect. I followed this tutorial: https://css-tricks.com/tour-performant-responsive-css-site/

But like in the example i have a white space on the left hand site. After some research I have read that's should be a bug exclusive in webkit based browser but I get the same result in firefox too.

On this site: http://keithclark.co.uk/articles/pure-css-parallax-websites/ the author describe a work around:

It is possible to work around for this bug by anchoring the transform-origin and perspective-origin to the right hand side of the viewport:

.parallax {
  perspective-origin-x: 100%;
}
.parallax__layer {
  transform-origin-x: 100%;
}

but that didn't do the trick.

I collect this in a jsfiddle

Any advice?

Thanks in advance.

Solution

  • Fine tuning the #container's left property will do the trick:

    left: -7px;