webkit 转换阻止链接

Posted

技术标签:

【中文标题】webkit 转换阻止链接【英文标题】:webkit transform blocking link 【发布时间】:2012-06-08 20:12:33 【问题描述】:

我一直在使用转换和过渡来创建没有 javascript 的动画 UI 组件,并且非常喜欢结果,但我遇到了一个令人不安的问题,这似乎是 webkit 浏览器所独有的。

在我旋转过的元素上,跨越元素宽度 100% 的锚点只能在元素右侧 50% 处访问。

在 Firefox 中使用 -moz-transform 不存在此问题,但在 Chrome 和 Safari 中使用 -webkit-transform 可 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>

任何人都可以提供任何帮助将不胜感激,因为我已经在这个问题上花费了大量时间。

【问题讨论】:

FWIW 我过去曾在 webkit 的转换元素中看到过文本超链接的错误(有时超链接根本不起作用)。所以你没疯 谢谢迈克尔。代码在其原始状态下要复杂得多,并且在将其缩减为演示问题所需的内容的过程中,我开始确信自己的理智。但这只是让我理智和无效,这仅比疯狂和无效要好一些。 ;) 【参考方案1】:

在梳理了webkit Bugzilla之后,发现有人遇到了同样的问题并找到了解决方法。

.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 添加到变换中使元素的左侧可点击。

这里是错误的链接:https://bugs.webkit.org/show_bug.cgi?id=54371

【讨论】:

非常感谢您提供此解决方案。我正在努力解决这个问题,因为我正在处理一个背面应该有一个表格的卡片翻转,并且只有输入字段的右侧是可点击的。已经为此工作了几个小时,这真的很有帮助。再次感谢! @MaiTar 我可以理解。我想我在这个问题上玩了将近 2 天。这是整个项目的障碍,我很难找到任何对它的引用。很高兴它有帮助! 我发现这是唯一可行的解​​决方案。关键是仅将 translateZ 应用于您刚刚翻转到背面的卡片,并且仅在翻转时应用。这样您就不会受到 translateZ 否则会导致的模糊渲染的影响。【参考方案2】:

我在下面使用了这段代码

<style>    
.outer div 
        float: left;
        -webkit-perspective: 200px;
        -webkit-transform-style: preserve-3d;
    
.outer a 
        -webkit-transition: all 1.0s ease-in-out;
        background:#0F6;
        width:100px;
        height:100px;
        display:block;
        -webkit-transform: rotateY(45deg);
    
.outer div:hover a 
        -webkit-transform: none;
    
</style>

<div class="outer">
    <div>
        <a href="http://www.google.com/"></a>
    </div>
</div>

此解决方案适用于我的 chrome。 http://jsfiddle.net/jaxweb/7qtLD/7/

【讨论】:

以上是关于webkit 转换阻止链接的主要内容,如果未能解决你的问题,请参考以下文章

使用 Webkit 转换和转换时如何修复闪烁

Webkit颜色转换循环

如何在 Safari 中的 WebKit 3D 转换后强制重新渲染

css Webkit和Safari文本转换问题

360浏览器要如何才能转换webkit内核

如何在 CSS 过渡期间防止 Webkit 文本呈现变化