Question

我正在尝试使用不透明度和比例的关键帧在全屏图像上创建动画循环。由于我希望该图像保持可见状态，因此将其放置在固定容器中。

Chrome（69），Firefox（62）和Safari mobile 11的所有操作均符合预期。问题仅在Safari mobile的较旧版本中才会发生，在10.3.3中可以看到 >在iPad上。

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

我尝试用GSAP替换关键帧动画，或者尝试通过添加/删除JS中的类进行动画处理，但是似乎无济于事。

中的解决方法

这是使用中的代码：

.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中运行。任何见解都将不胜感激。

Answer 1

在您的项目中尝试以下工作片段，并使用此方法查看问题是否存在，希望对您有所帮助：）

注意：无需在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>

Answer 2

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

虽然我不完全了解合成图层和重新绘制背后的机制，但我确实得出结论，当Safari 10位于固定位置容器内时，Safari 10不能正确重新绘制GPU动画元素，并且仅当使用诸如滚动跳转机制时scrollTo（）或内部链接。

通过在每次滚动跳转后强制在固定的容器上重新粉刷，动画图像可以正确呈现而不会出现任何剪切。为此，我尝试将显示切换为无/块，但每次都重新启动动画。我发现固定容器上的切换可见性使子图像可以正确渲染而无需重新启动动画。

CSS

.invisible {
    visibility: hidden;
}

JS

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);
}));

Safari Mobile上固定父级中的动画出现问题

2 个答案: