Manu Zi Manu Zi - 4 months ago 6
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: 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.

Answer

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

left: -7px;
Comments