CSS3 3D动画在Safari中消失

我为我的网站构建了一个简单的导航组件，它左右摆动着'门'。这些工作在除Safari之外的所有浏览器中都很有用，当鼠标从一扇门移动到另一扇门时，“门”似乎完全消失在其背景之后。只要在触摸蓝色门之前等待动画停止，一次只能移动一个门。CSS3 3D动画在Safari中消失

此外，我的网站上的一页有固定的背景视频，并且在该页面上动画根本不起作用，整个div只要将鼠标悬停在其上即可消失。

我一直在这个问题上工作了很长一段时间，无法想象这种奇怪行为的可能原因。如果我在不将它放入引导网格的情况下实现动画，它可以工作，但是一旦涉及到背景视频，就会导致在此代码中看到相同的问题。

在此先感谢任何想法，为什么发生这种情况！

HTML：

<head> 
    <link href="css/bootstrap.css" rel="stylesheet"/> 
</head> 

<body> 
<div class="container-fluid"> 
    <div class="row"> 
    <div class="col-xs-6 greenbackground"> 
     <a href="#"> 
     <div class="greenlink doorleft"> 
      <h1>Left Swing Link</h1> 
     </div> 
     </a> 
    </div> 
    <div class="col-xs-6 bluebackground"> 
     <a href="#"> 
     <div class="bluelink doorright"> 
      <h1>Right Swing Link</h1> 
     </div> 
     </a> 
    </div> 
    </div> 
</div> 
<body>

CSS：

.greenlink{ 
    width: calc(100% + 30px); 
    padding-top:5em; 
    padding-bottom:5em; 
    text-align:center; 
    background-color: lightgreen; 
    margin-left:-15px; 
} 

.greenbackground{ 
    background-color: green; 
} 

.bluelink{ 
    width: calc(100% + 30px); 
    padding-top:5em; 
    padding-bottom:5em; 
    text-align:center; 
    background-color:lightblue; 
    margin-left:-15px; 
} 

.bluebackground{ 
    background-color:blue; 
} 

.doorleft{ 
    transition: all 500ms ease; 
    transform: perspective(900px) rotateY(0deg); 
    transform-origin: 0% 0%; 
    -webkit-transform-style: preserve-3d; 
} 

.doorleft:hover { 
    transform: perspective(1000px) rotateY(30deg); 
} 

.doorright { 
    transition: all 500ms ease; 
    transform: perspective(900px) rotateY(0deg); 
    transform-origin: 100% 0%; 
    -webkit-transform-style: preserve-3d; 
} 

.doorright:hover { 
    transform: perspective(1000px) rotateY(-30deg); 
}

这里的链接到codepen：https://codepen.io/anon/pen/RgBdJp

来源

2017-07-06 Ryan

我不知道为什么，但是给.col-xs-6position: static解决它（引导给它position: relative）。在这种情况下，它不会影响其他任何东西，所以应该可以。显然这是一个Safari问题。

来源

2017-07-06 18:58:15 powerbuoy

这解决了部分问题，但是无论何时涉及到背景视频，它都会完全失灵。我开始相信这是背景视频的一个单独的错误，所以我会接受这个答案。 – Ryan

CSS3 3D动画在Safari中消失

回答

相关问题