Lately, I've been developing a compact web application that incorporates the well-liked sidebar interaction design. In applying CSS3 animations to shift the sidebar into view, the animation glides smoothly but halts at the correct spot in the native browser on Android devices.
The animation script I'm using is fairly straightforward:
#wrapper > #off-canvas {
-webkit-transform: translate(0, 0);
-moz-transform: translate(0, 0);
-ms-transform: translate(0, 0);
-o-transform: translate(0, 0);
transform: translate(0, 0);
}
#wrapper > #off-canvas.off {
-webkit-transform: translate(80%, 0);
-moz-transform: translate(80%, 0);
-ms-transform: translate(80%, 0);
-o-transform: translate(80%, 0);
transform: translate(80%, 0);
}
You can observe this behavior in the JSFiddle I created. The code may appear a bit disorganized, but the issue with the behavior is evident. (Keep in mind that you need an Android device to replicate the problem)
- Transitioning the "left" attribute works perfectly fine.
- Utilizing
transform: translatewith pixel values also functions correctly.
Have others encountered similar issues and discovered any solutions?
I aim to utilize a technique that harnesses hardware acceleration to boost the app's performance.