Safari Mobile 上固定父级内的动画问题答案

【问题标题】：Issue with animations inside fixed parent on Safari MobileSafari Mobile 上固定父级内的动画问题
【发布时间】：2019-03-04 01:12:21
【问题描述】：

我正在尝试使用关键帧在全屏图像上创建动画循环以实现不透明度和缩放。因为我希望这张图片能一直显示，所以我将它放在了一个固定容器中。

在 Chrome(69)、Firefox(62) 和 Safari 移动版 11 中一切正常。该问题仅出现在 Safari 移动版的旧版本中，在 10.3.3 中观察到 在 iPad 上。

项目的导航使用内部链接在页面上下跳转。当页面跳转到锚点时，动画图像被剪裁（如缺少上半部分或下半部分）或完全消失，只有在新的滚动事件下才能正确呈现。每当使用内部链接时，此问题都会重复。正常向下滚动页面时，一切正常。

我尝试用 GSAP 替换关键帧动画或通过在 JS 中添加/删除类来制作动画，但似乎没有任何帮助。

更新：answer below中的解决方法

这是使用的代码：

.animation-wrapper {
  position: fixed;
  width: 100vw;
  height: 100vh;
}

.animation-wrapper img {
  width: 100%;
  animation: pulse 8s ease-in-out infinite;  
}

@keyframes pulse {
  0% {
    transform: scaleX(0.95);
  }   
  50% {
    transform: scaleX(1.05);
  }    
  100% {
    transform: scaleX(0.95);
  }
}

body {
  height: 4000px;
  background-color: black;
}

nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 20;
}

ul {
  display: flex;
  justify-content: space-around;
}

li > a {
  color: white;
}

.anchor {
  position: absolute;
  top: 0;
}

section {
  position: relative;
  height: 1000px;
}

<nav>
  <ul>
    <li class="item"><a href="#home">HOME</a></li>
    <li class="item"><a href="#projects">PROJECTS</a></li>
    <li class="item"><a href="#about">ABOUT</a></li>
    <li class="item"><a href="#contact">CONTACT</a></li>
  </ul>
</nav>

<div class="animation-wrapper">
  <img src="img1.jpg" alt="">
</div>

<section>
  <a id="home" class="anchor"></a>
</section>

<section>
  <a id="projects" class="anchor"></a>
</section>

<section>
  <a id="about" class="anchor"></a>
</section>

<section>
  <a id="contact" class="anchor"></a>
</section>

这个问题听起来很熟悉吗？任何人都知道是什么导致了这种行为，以及我可以做些什么作为解决方法？这似乎是一个在较新版本中修复的错误，但我仍然希望这个项目也能在旧版 Safari 中运行。非常感谢任何见解。

【问题讨论】：

标签： css animation safari

【解决方案1】：

在您的项目中尝试以下工作 sn-p 并使用此方法查看问题是否存在，希望对您有所帮助:)

注意：不需要使用position: absolute的锚标签来获取结果，id可以设置为section。

.animation-wrapper {
  top: 0;
  left: 0;
  position: fixed;
  width: 100vw;
  height: 100vh;
}

.animation-wrapper img {
  width: 100%;
  height: 100%;
  animation: pulse 8s ease-in-out infinite;  
}

@keyframes pulse {
  0% {
    transform: scaleX(0.95);
  }   
  50% {
    transform: scaleX(1.05);
  }    
  100% {
    transform: scaleX(0.95);
  }
}

body {
  height: 4000px;
  background-color: black;
}

nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 20;
}

ul {
  display: flex;
  justify-content: space-around;
}

li > a {
  color: white;
}

section {
  position: relative;
  height: 1000px;
}

<nav>
  <ul>
    <li class="item"><a href="#home">HOME</a></li>
    <li class="item"><a href="#projects">PROJECTS</a></li>
    <li class="item"><a href="#about">ABOUT</a></li>
    <li class="item"><a href="#contact">CONTACT</a></li>
  </ul>
</nav>

<div class="animation-wrapper">
  <img src="https://via.placeholder.com/300x300">
</div>

<section id="home">
</section>

<section id="projects">
</section>

<section id="about">
</section>

<section id="contact">
</section>

【讨论】：

感谢您提供有关删除多余锚标记和在部分上设置 ID 的提示。
至于您提供的 sn-p，在 img 上指定 100% 的高度确实可以消除渲染问题，但也会强制显示扭曲的纵横比。对于这个项目，我想保留纵横比并保持图像的垂直悬垂。有趣的是，如果您以高于 100% 的百分比指定图像高度，问题就会重新出现。在 120% 高度时，会发生剪裁，但会很快自行纠正。在 140% 或更高时，它会保持剪裁。关于为什么会发生这种行为的任何想法？

【解决方案2】：

我找到了解决此问题的解决方法。

虽然我不完全理解合成层和重绘背后的机制，但我确实得出结论，当 GPU 动画元素位于固定位置容器内时，Safari 10 不会正确重绘 GPU 动画元素，并且仅在使用滚动跳跃机制时scrollTo() 或内部链接。

通过在每次滚动跳转后在固定容器上强制重绘，动画图像可以正确渲染而没有任何剪辑。为此，我尝试将显示切换为无/阻止，但每次都重新启动动画。我发现在固定容器上切换可见性可以让子图像在不重新启动动画的情况下正确呈现。

CSS

.invisible {
    visibility: hidden;
}

document.querySelectorAll('.links).forEach(el => el.addEventListener('click', function () {
    document.querySelector('.animation-wrapper').classList.add('invisible');
    setTimeout(function () {
        document.querySelector('.animation-wrapper').classList.remove('invisible');
    }, 1);
}));

【讨论】：