我正在尝试在我的网站上添加动画效果。我使用了下面链接的 jsfiddle 代码的类似版本。在桌面端查看时，动画效果良好。但是，在移动端（特别是在我的 Chrome 浏览器中）会出现奇怪的延迟。当我在手机上打开 jsfiddle 时也会显示完全相同的延迟。如果我重新启动 Chrome 应用程序，则延迟会消失，但很快就会再次出现。
这个问题在 Safari 中并不会出现。
我使用的是最新的 IOS 14.6 版本和 Chrome V90，拥有最新的 iPhone。
https://jsfiddle.net/brodriguez98/e2bvwcja/33/
HTML：
<html>
<p style = 'margin-top: 100vh;'>above</p>
<img class = 'balltest show-on-scroll standard-push' src = 'http://www.pngall.com/wp-content/uploads/5/Sports-Ball-Transparent.png'/>
<img class = 'balltest show-on-scroll fade-in' src = 'http://www.pngall.com/wp-content/uploads/5/Sports-Ball-Transparent.png'/>
<p style = 'margin-bottom: 100vh'>below</p>
</html>
CSS：
.balltest {
width: 50px;
}
.fade-in {
opacity: 0;
-webkit-transition: transform 4s 0.25s cubic-bezier(0, 1, 0.3, 1), opacity 1s 0.25s ease-out;
-moz-transition: transform 4s 0.25s cubic-bezier(0, 1, 0.3, 1), opacity 1s 0.25s ease-out;
-o-transition: transform 4s 0.25s cubic-bezier(0, 1, 0.3, 1), opacity 1s 0.25s ease-out;
transition: transform 4s 0.25s cubic-bezier(0, 1, 0.3, 1), opacity 0.3s 0.25s ease-out;
will-change: transform, opacity;
}
.standard-push {
opacity: 0;
transform: translateY(4em);
-webkit-transition: transform 4s 0.25s cubic-bezier(0, 1, 0.3, 1), opacity 1s 0.25s ease-out, translateZ(0);
-moz-transition: transform 4s 0.25s cubic-bezier(0, 1, 0.3, 1), opacity 1s 0.25s ease-out;
-o-transition: transform 4s 0.25s cubic-bezier(0, 1, 0.3, 1), opacity 1s 0.25s ease-out;
transition: transform 4s 0.25s cubic-bezier(0, 1, 0.3, 1), opacity 0.3s 0.25s ease-out;
will-change: transform, opacity;
}
.is-visible {
transform: translateY(0);
opacity: 1;
}
Javascript：
var elementsToShow = document.querySelectorAll('.show-on-scroll');
$(window).scroll(function() {
Array.prototype.forEach.call(elementsToShow, function (element) {
if (isElementInViewport(element)) {
element.classList.add('is-visible');
} else {
element.classList.remove('is-visible');
}
});
});
// Helper function from: https://dev59.com/6nVD5IYBdhLWcg3wAGeD#7557433
function isElementInViewport(el) {
// special bonus for those using jQuery
if (typeof jQuery === "function" && el instanceof jQuery) {
el = el[0];
}
var rect = el.getBoundingClientRect();
return (
(rect.top <= 0 &&
rect.bottom >= 0) ||
(rect.bottom >= (window.innerHeight || document.documentElement.clientHeight) &&
rect.top <= (window.innerHeight || document.documentElement.clientHeight)) ||
(rect.top >= 0 &&
rect.bottom <= (window.innerHeight || document.documentElement.clientHeight))
);
}
非常抱歉，手机上无法在全屏模式下打开JSfiddle, 展示的页面较小:
动画在重新启动手机Chrome后工作正常: https://www.loom.com/share/ac6c843b90d2428bb875572d55e32959
当我关闭/重新加载页面后，动画很快就会出现问题: https://www.loom.com/share/e51cf88aa1a74aed8e4d1ed253e83ea0
这与我在使用移动Chrome浏览器访问我的网站时看到的完全相同。
更新: 以下任何答案都没有对我起作用。我忘记提到这种情况也发生在文本上。谢谢你建议codesandbox，我复制了你的代码并删除了图片，但是在我的iPhone Chrome浏览器上仍然得到了相同的结果。我还尝试使用onload函数包装所有内容，但也不起作用。
目前我已经通过JQuery动画解决了这个问题，但我仍然希望CSS3转换可以在我的网站上正常工作。
https://codesandbox.io/s/animation-test-forked-tqurn?file=/index.html
