All geek questions in one place

3d css transform (translateZ) not working on android 4.0.3?

I have this html that works fine in Chrome, Safari and Mobile Safari browsers.

<html><head> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> </head> <body> <div style="position:relative;-webkit-perspective:1000;width:300px;height:50px"> <div style="position:relative;width:300px;height:50px;-webkit-transform-origin:0px 25px 0px;-webkit-transform-style:preserve-3d;"> <div style="position:absolute;width:300px;height:50px;-webkit-transform:translateZ(125px);background-image:url(http://i855.photobucket.com/albums/ab119/ansherina6/banner2-1.png)"></div> </div></div> </body></html>

In android 4.0.3, translateZ does not show any (desired) effect on the div. Besides translateZ, everything else works fine. If I use translate3D (a, b, c), then again the results of X and Y affect the rendering. Is there any way around this?

+4
source share
1 answer

According to caniuse translate is supported in android 4 and above. However, I suspect that more specific 3D transformations, such as translations on the z axis, do not receive such widespread support, especially in browsers that do not support webgl. I think there is a reserve if critical: transformie

0
source

Source: https://habr.com/ru/post/1435195/

More articles:


All Articles