webkit转换阻塞链接

Question

webkit转换阻塞链接

Mys*_*itz 12 css webkit css3 css-transitions css-transforms

我一直在使用变换和转换来创建没有Javascript的动画UI组件并且真正享受结果,但我遇到了一个令人不安的问题,似乎是webkit浏览器所独有的.

在我旋转的元素上,只能在元素的右边50%访问跨越元素宽度100%的锚点.

在Firefox中使用-moz-transform不存在此问题,但使用-webkit-transform在Chrome和Safari中都可以100%重现.

这是代码:

<!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>

Run Code Online (Sandbox Code Playgroud)

任何人都可以提供的帮助将非常感激,因为我已经在这个问题上度过了过多的时间.

Answer 1

Mys*_*itz 20

在通过webkit Bugzilla进行梳理之后,我发现有人遇到了同样的问题并找到了解决方法.

.face.back {
    background-color: #125672;
    -moz-transform: rotateY(180deg);
    -webkit-transform: rotateY(180deg);
}

Run Code Online (Sandbox Code Playgroud)

变为:

.face.back {
    background-color: #125672;
    -moz-transform: rotateY(180deg);
    -webkit-transform: rotateY(180deg) translateZ(1px);
}

Run Code Online (Sandbox Code Playgroud)

将translateZ添加到变换使得元素的左侧可以单击.

以下是该错误的链接:https://bugs.webkit.org/show_bug.cgi？id = 54371

归档时间：	13 年，6 月前
查看次数：	5976 次
最近记录：	11 年，9 月前