Manu Zi Manu Zi - 2 months ago 5x
CSS Question

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:

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: 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.


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

left: -7px;