Safari中消失的CSS3 3D动画

Question

我为我的网站构建了一个简单的导航组件，该组件具有左右旋转的“门”。 这些功能在Safari浏览器以外的所有浏览器中都很好用，当您的鼠标从一个门移动到另一个门时，“门”似乎完全消失在背景的背后。 只要您等待动画停止后再触摸蓝色的门，一次将鼠标悬停在一个门上就可以了。

此外，我网站的一页上有固定的背景视频，而在该页面上的动画根本不起作用，将鼠标悬停在该整个div上就会消失。

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

在此先感谢您提供任何想法，为什么会这样！

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

Answer 1

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

Safari中消失的CSS3 3D动画

问题描述

1 个解决方案

解决方案1
1 已采纳 2017-07-06 18:58:15

Safari中消失的CSS3 3D动画

问题描述

1 个解决方案

解决方案1 1 已采纳 2017-07-06 18:58:15

解决方案1
1 已采纳 2017-07-06 18:58:15