webkit变换阻塞链接 [英] webkit transform blocking link
问题描述
我一直在使用转换和转换来创建动画UI组件没有Javascript和真正享受的结果，但我遇到一个令人不安的问题，似乎是webkit浏览器是独一无二的。
I've been working with transforms and transitions to create animated UI components without Javascript and really enjoying the results, but I've come across a disturbing issue that appears to be unique to webkit browsers.
在已旋转的元素上，跨越元素宽度100％的锚点只能在元素右侧50％上访问。
在Firefox中使用-moz-transform不存在这个问题，但是在Chrome和Safari中使用-webkit-transform可以100％重现。
This problem does not exist using -moz-transform in Firefox, but is 100% reproducible in both Chrome and Safari using -webkit-transform.
这里是代码：
<!doctype html>
<html>
<head>
<title>webkit spincard test bed</title>
<style type="text/css">
#card-lists{
width:100%;
float:left;
}
#card-lists ul{
list-style:none;
}
#card-lists ul li{
width:230px;
height:236px;
}
.non-mobile #card-lists ul.card-list li .flipcard-container:hover .flipcard,
.non-mobile #card-lists ul.card-list li .flipcard-container.hover .flipcard{
-moz-transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
-moz-transform-style: preserve-3d;
-moz-transition: all 0s linear 0s;
-webkit-transform-style: preserve-3d;
-webkit-transition: all 0s linear 0s;
}
.non-mobile #card-lists ul.card-list li .flipcard{
-moz-transform: rotateY(0deg);
-moz-transition: all 0s linear 0s;
-webkit-transform: rotateY(0deg);
-webkit-transition: all 0s linear 0s;
width:230px;
height:236px;
}
.face {
position: absolute;
width: 100%;
height: 100%;
-moz-backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
.face.back {
background-color: #125672;
-moz-transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
}
.face.front {
background-color:#000;
}
</style>
</head>
<body class="non-mobile">
<div id="card-lists">
<ul class="card-list" id="cardes-list-total">
<li>
<div class="flipcard-container">
<div class="flipcard">
<div class="front face">
<a href="#">
<div style="width:100%; height:100%;">
</div>
</a>
</div>
<div class="back face">
<a href="#">
<div style="width:100%; height:100%;">
</div>
</a>
</div>
</div>
</div>
</li>
</ul>
</div>
</body>
</html>
任何人都可以提供任何帮助将非常感谢，因为我已经花了过多的时间问题。
Any help anyone could offer would be greatly appreciated as I've already spent an inordinate amount of time on the issue.
推荐答案
在梳理了webkit Bugzilla之后，我发现一个有同样问题的人找到了解决方法。 p>
After combing through the webkit Bugzilla, I found someone who had the same issue and found a workaround.
.face.back {
background-color: #125672;
-moz-transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
}
成为：
.face.back {
background-color: #125672;
-moz-transform: rotateY(180deg);
-webkit-transform: rotateY(180deg) translateZ(1px);
}
将translateZ添加到变换中使得元素的左侧可以单击
The addition of the translateZ to the transform makes the left side of the element clickable.
以下是错误的链接： https： //bugs.webkit.org/show_bug.cgi?id=54371
这篇关于webkit变换阻塞链接的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
