在Safari 5中，添加对3D CSS过渡的引用会破坏我的2D过渡

在Safari 5中添加对3D过渡的引用会破坏我的2D过渡。我使用的版本是5.1.1(7534.51.22)。

下面的代码演示:

<!DOCTYPE html>
<html lang="en">
    <head>
        <style type="text/css" charset="utf-8">
            body{ font-family:Arial;font-size:1.5em; line-height:3em; }
            .item-a 
            {
                padding-left: 0;
                -webkit-transition: padding-left 0.1s ease-out;
            }
            .item-a:hover {
                padding-left: 5px;
            }
            .item-b  > .item-b-fade-in {
                opacity: 0;
                margin: 20px 0 0 0;     
                visibility: hidden;     
                -webkit-transition:opacity 0.4s ease-in-out;
            }
            .item-b:hover > .item-b-fade-in {
                opacity: 1;
                margin: 0;  
                visibility: visible;
            }           
           .three-d-transform {-webkit-transform:translate3d(0,0,0);}
        </style>
    </head>
    <body>      
        <!--Uncomment the following to break the transitions on this page in Safari 5 -->
        <!--<div class="three-d-transform" />-->
        <a class="item-a" href="#">
            Hover For Transition A (margin change)
        </a>
        <div class="item-b" href="#">
            Hover for transition B (Fade-in)
            <div class="item-b-fade-in">
                <a href="#">One</a>
                <a href="#">Two</a>
            </div>
        </div>          
    </body>
</html>

实验让我怀疑如果引用3D转换，Safari页面渲染会以某种方式被修改，导致我的问题，但这是猜测。

有人看到这个并找到解决方案吗?

我看到过另一个问题，但是根据答案移动位置属性对我没有影响。

我已经解决了这个问题在Safari(不像Chrome)中，你需要指定交互转换。如果你的鼠标悬停在上方时发生了过渡，你需要指定鼠标悬停时的过渡

如果不这样做，则转换将保持"锁定"在未完成状态，直到调用页面上的另一个转换。

作为旁注，当在页面上使用3D转换时，在Safari中有许多与z-index和定位相关的副作用(这导致我在研究这个问题时陷入死胡同)

相关内容

最新更新

热门标签：