1

Chrome/Safari ブラウザで問題が発生しました。CSS3 変換を適用した後、mouseupおよびclickイベントを受信しません (IE9/10 では非常にうまく機能します)。

これは私の動作しないサンプルです:

<script type="text/javascript">
    $(".box").mousedown(function (e) {
        $(this).addClass('transform');
    });

    $(".box").mouseup(function (e) {
        $(this).removeClass('transform');
    });

    $(".box").click(function (e) {
        alert("Click"); // Not worked under Chrome/Safari !
    });
</script>

<div class="box"></div>

および CSS3 スタイル:

.box {
    background-color:#f00;
    width:200px;
    height:200px;
}

.transform {
    transform-origin: 0% 50%;
    transform: rotateY(10deg);
    -ms-transform-origin: 0% 50%;
    -ms-transform: rotateY(10deg);
    -webkit-transform-origin: 0% 50%;
    -webkit-transform: rotateY(10deg);
}
4

3 に答える 3

3

問題は、設定する必要があることですposition:absolute：

.transform {
    transform-origin: 0% 50%;
    transform: rotateY(30deg);
    -ms-transform-origin: 0% 50%;
    -ms-transform: rotateY(30deg);
    -webkit-transform-origin: 0% 50% 0px;
    -webkit-transform: rotateY(-31deg);
}​

このデモをチェック UPDATED 2

変換に関するこのリンクを確認できます

于 2012-07-26T18:45:32.210 に答える
2

これは Webkit のブラウザーのバグです。z 変換をキャンセルするように細心の注意を払っている限り、クリックは正常に機能します (正確には - 単純であるほど良い)。

Firefox と IE はどちらも、z 変換に関係なくクリックを処理します。

position:absolute が機能する場合もありますが、ブラウザーの障害に対する不適切な解決策です。

于 2013-03-30T01:00:13.777 に答える
2

これにはいくつかの理由が考えられます。そのうちの 1 つは、前述のように、position:absolute を親のどこかに設定する必要があるということです。

ただし、現在、変換された顔の transformZ 値がランダムに計算される Webkit (およびおそらく他のブラウザー) にもバグがあります。したがって、解決策は次のとおりです。

-webkit-transform:translateZ(0px);
-moz-transform:translateZ(0px);
transform:translateZ(0px);

対話性の問題を引き起こしている要素に。これは、ネストされた子要素の束で変換された div 要素で機能し、さまざまな角度で断続的にクリック フィードバックを与えてくれました。子要素の1つを親要素の端を越えて移動することで問題を「修正」できたため、これが起こっていることを知っています。つまり、親要素が子要素を見えなくしていました。

ただし、この修正により、後続の子要素の Z 深度に関する他の多くの問題も解決されたように見えますが、これはそもそも存在すべきではありませんでした。これは、単純なループ レンダリング バグを示唆しています。つまり、この「修正」は、開発者がレンダリング ルーチンを微調整するため、ブラウザーの将来の更新で壊れる可能性があります。

于 2013-10-09T01:58:56.800 に答える