Problems with TranslateZ on mobile
I tried to implement this http://codepen.io/keithclark/pen/JycFw but experienced severe clicks and lag in chrome using mobile.
#slide1:before {
background-image: url("http://lorempixel.com/output/abstract-q-c-640-480-4.jpg");
transform: translateZ(-1px) scale(2);
z-index:-1;
}
After researching, I tried to use 3d transform, backside, perspective, etc., but was still experiencing scroll lagging.
+3
source to share
1 answer
TransformZ is required to lag behind the device because it makes the device render it as if it were 3d. I don't know how to fix this, but here are some alternative parallax effects made in JQuery and CSS:
http://andyshora.com/parallax.html
http://www.devfloat.com/jquery-parallax-scrolling-tutorials/
I hope this helps you!
0
source to share