Question

我有一个简单的卡片翻转动画，它适用于我测试过的浏览器。

然而，当这张卡翻转动画发生在另一个同样是动画的div之上时，Safari上存在一个问题。出于某些原因，当卡片翻转时它会消失在“背景div”后面。我认为这可能是一个private void RichTextBox_Loaded(object sender, RoutedEventArgs e) { RichTextBox rtb = sender as RichTextBox; rtb.Width = this.Width; }问题但是从我尝试的问题来看并非如此。

为了使示例简单，背景div为灰色。我们的想法是在背景中产生发光效果。

下面是我所拥有的代码示例，我已经在Chrome，Firefox和Edge上测试了它的工作正常，但是在Safari翻转时它会消失。

z-index

$(document).ready(function() {
  $('button').click(function() {
    $('.wrapper').toggleClass('flip');
  });
});

.perspective {
  perspective: 1000px;
  margin: 50px;
  position: relative;
  width: 175px;
  height: 250px;
}

.some-bg {
  background-color: #ccc;
  background-position: center;
  width: 100%;
  height: 100%;
  position: absolute;
  animation: test-bg-animation 1s infinite linear;
}

@keyframes test-bg-animation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.wrapper {
  width: 125px;
  height: 175px;
  border: 1px solid blue;
  position: absolute;
  transform-style: preserve-3d;
  transition: all 250ms;
  top: 35px;
  left: 25px;
}

.wrapper.flip {
  transform: rotateY(180deg);
}

.card-face {
  width: 100%;
  height: 100%;
  position: absolute;
  -webkit-backface-visibility: hidden;
}

.back {
  background-color: tomato;
}

.front {
  background-color: #bada55;
  transform: rotateY(180deg);
}

Answer 1

您可以通过将.some-bg和.wrapper div嵌套到具有相对定位父级的绝对定位div来解决此问题。

看一下这个小提琴的例子： https://jsfiddle.net/voLzv68w/

覆盖动画的Safari CSS问题

1 个答案: