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);
}​

检查此演示更新 2

您可以查看有关转换的此链接

于 2012-07-26T18:45:32.210 回答
2

这是 webkit 的浏览器错误。只要您非常小心地取消任何 z 变换（正确 - 越简单越好），点击就会正常工作。

尽管有 z-transform，Firefox 和 IE 都会处理这些点击。

position:absolute 可能对某些人有用，但它是浏览器故障的不适当解决方案。

于 2013-03-30T01:00:13.777 回答
2

发生这种情况有几个原因。如前所述，其中之一是 position:absolute 应该设置在某处的父级上。

然而，目前 webkit（可能还有其他浏览器）中也存在一个 bug，其中 transformZ 值是随机计算的，用于转换后的面部。因此，解决方案是应用：

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

到给你带来交互问题的元素。这对我来说适用于一个 div 元素，该元素由一堆嵌套的子元素转换，并且会间歇性地给我不同角度的点击反馈。我知道这是正在发生的事情，因为我能够通过将其中一个子元素移动到父元素的边缘之外来“解决”这个问题，这意味着父元素无形地遮住了子元素。

然而应该提到的是，这个修复似乎也解决了一系列其他与后续子元素的 Z 深度有关的问题，这些问题一开始就不应该存在。这表明了一个简单的循环渲染错误，这意味着随着开发人员调整渲染例程，这个“修复”可能会随着浏览器的未来更新而中断。

于 2013-10-09T01:58:56.800 回答