Question

我正在构建一个使用简单CSS动画的基于Web的出版物。它是一个标题从“后面”开始的圆圈。然后一直播放，直到它显示出前面的＆＃39;加载页面时。动画在Chrome和Safari 6上播放得很好，但是当在设备上进行测试时，圆圈消失，并且在重叠的英雄图像上出现奇怪的闪烁和空白。

我无法提供网络预览以与您分享，也无法提供问题的GIF（抱歉！），但如果我需要提供更多信息，请与我联系。

编辑：管理以解决＆＃39;渲染问题，但在图像上旋转时会闪烁。有什么想法吗？

我试图创建的页面图片：

http://i.stack.imgur.com/TsxpZ.jpg

HTML结构：

<div class="circle-feat flip-circle">
    <div class="circle-title">
        <h1 class="book-align-center Title-White" data-name="title">COLD IN JULY</h1>
    </div>
</div>

CSS的片段：

.circle-feat {
  position: relative;
  width: 84%;
  height: 0;
  padding: 42% 0;
  margin: 1em auto;
  border-radius: 50%;
  background: rgb(0,0,0);
  z-index: 10;
}

.circle-title {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  text-align: center;
  transform-style: preserve-3d;
}

.circle-title:before {
  content: '';
  vertical-align: middle;
  display: inline-block;
  width: 0;
  height: 100%;
}

.circle-title h1 {
  vertical-align: middle;
  display: inline-block;
  padding: 20px;
}

.flip-circle {
  transform-style: preserve-3d;
  -webkit-backface-visibility: visible;
  -webkit-animation-name: flip;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-duration: 2.2s;
  -webkit-animation-delay: 1.5s;
}

@-webkit-keyframes flip {
  0% {
    -webkit-transform: perspective(800) translateZ(0) rotateY(-180deg) scale(1);
    -webkit-animation-timing-function: ease-out;
  }

  100% {
    -webkit-transform: perspective(800) translateZ(0) rotateY(0deg) scale(1);
    -webkit-animation-timing-function: ease-in;
  }
}

提前致谢！

Answer 1

我不是狂热的Apple用户（对不起，如果这是无关紧要的），但我认为您的问题可能与前缀有关。新版本的Safari在转换中不需要-webkit-前缀，但是一些旧版本会执行...您可以尝试将所有前缀添加到转换和转换中，看看它是否有效。

Answer 2

好的，我应该把这个放在一个答案中，因为在大多数情况下，我会回答我自己的问题。我设法通过删除文章附带的背景颜色规则来解决渲染问题，我想Safari iOS7在那里无法应对它。

Answer 3

我想知道问题是否只能由您使用的iPhone造成（缺少内存，太多应用程序或浏览器配置）。您可以尝试使用朋友的iOS7设备并检查是否属于这种情况。

根据我的经验，移动设备无法在网络上很好地处理CSS3动画，也许Apple已经在iOS7中削减了一些角落。因此，您可以尝试创建此出版物的移动版本，其中没有任何复杂的动画。 This article on CSS-Tricks很棒 - 它展示了如何使用jQuery或纯Javascript实时检测设备的大小。我知道这不是一个解决方案，但是如果从动画中删除背景颜色使它看起来很糟糕，这可能是你唯一的选择。如果有任何修复它，请告诉我！

在iOS7和Safari 7中翻转动画的奇怪渲染

3 个答案: