2

次のシナリオでは、コンテナ内に CSS3 3D 変換が適用された 2 つの div が表示されます。どちらも、クリックされたときにイベントを発生させる必要があります。この場合、クリックされた div を示すアラートが表示されます。

<!DOCTYPE html>
<html>
<body>
  <div style="-webkit-perspective: 600; -webkit-transform-style: preserve-3d; width: 500px; height: 200px; overflow: hidden;">
    <div onclick="alert('1');" style="-webkit-transform: translate3d(0px, 0px, -100px); background-color: blue; position: absolute; width: 100px; height: 100px;">
    </div>
    <div onclick="alert('2');" style="-webkit-transform: translate3d(200px, 0px, 100px); background-color: red; position: absolute; width: 100px; height: 100px;">
    </div>
  </div>
</body>
</html>

問題は、2 番目の div のみが目的の動作を示すことです。最初の div をクリックしても、表示されたアラートが表示されません (最新の Safari、Chrome、および Safari iOS でテスト済み)。

負の z 値を -100px から 0px または正の値に変更するとすぐに、すべて正常に動作します。

これはブラウザのバグですか？そして、望ましい動作を達成する方法はありますか?

4

3 に答える 3

1

私は以前にこの問題を見たことがあります：

iOS デバイスでの CSS3 移行の問題

Webkit Mobile は、3D 変換と組み合わせた負の z-index 値を好みません。W3C は、z-index は整数http://www.w3.org/TR/CSS2/visuren.html#z-indexである必要があると述べていますが、実際には、Firefox と現在の Webkit の従来の問題により、その方が優れています。正の数に固執する。

于 2011-07-19T19:18:44.237 に答える
0

親 DIV で、-webkit-transform-style: preserve-3d; を変更します。to -webkit-transform-style: flat; それは私にとってはうまくいきます。

于 2015-10-22T15:22:17.083 に答える
0

クリップされたオブジェクトの親要素に正の translateZ を追加して、子の負の値を補正します。これにより、body 要素の (z:0) ブラウザー プレーンの上にある項目が変換されます。これにより、ブラウザーの Z プレーンに対して div が負になると、クリック イベントとホバー イベントが停止します。これは、Chrome と Safari (およびモバイル Safari) でのみ発生するようです。

body を最後のイベント ハンドラーと考えれば、必ずしもバグではないと思います。

于 2012-08-18T17:38:37.023 に答える