Chrome、Safari、および Mobile Safari で正常に動作するこの html があります。
<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>
Android 4.0.3 では、translateZ は div に (望ましい) 効果を示していません。translateZ を除いて、他のすべては正常に機能しています。translate3D(a,b,c) を使用すると、X 値と Y 値のみがレンダリングに影響します。これに対する回避策はありますか?