Question

我在Chrome / Safari浏览器下遇到了问题。应用CSS3转换后，我没有收到 mouseup 和点击事件（在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);
}

Answer 1

问题是您需要设置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);
}

Check this Demo UPDATED 2

您可以查看有关转化的链接

Answer 2

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

Firefox和IE都会处理点击，尽管他们的z变换。

职位：绝对可能对某些人有用，但对于浏览器失败来说这是不恰当的解决方案。

Answer 3

这可能有几个原因。如上所述，其中一个是位置：绝对应该设置在某个地方的父母身上。

然而，webkit（可能还有其他浏览器）中还存在一个错误，其中为变换后的面部随机计算transformZ值。因此，解决方案适用：

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

给予您交互性问题的元素。这对我来说是一个div元素，它被一堆嵌套的子元素转换，并会间歇地给我点不同角度的反馈。我知道这就是正在发生的事情，因为我能够通过将一个子元素移动到父元素的边缘之外来“修复”该问题，这意味着父元素无形地模糊了子元素。

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

CSS3转换后点击不会出现

3 个答案: