在iOS设备的Chrome上，CSS过渡的行为有所不同

Question

问题

我有一个正在处理的网页，该网页在加载时在页面元素上使用简单的淡入和淡出过渡。

它们工作正常，但我似乎在iOS版Chrome上遇到问题。奇怪的是，该问题不会在任何其他浏览器上重现，也不会在使用BrowserStack进行测试时发生。但似乎仅在仅在Chrome中使用实际的iPhone或iPad时才会发生。

发生的事情是文本淡入，然后不透明度回到0，使其再次消失。

因为它仅发生在实际设备上，所以我很难找到问题的根源。显然，我能够将转换识别为问题的根源，但到目前为止，我还没有弄清楚为什么会发生转换，并且仅在实际设备上的单个浏览器上才知道。我不确定直接在移动设备上使用开发工具的方法，通常我只会在VM中模拟它，但是正如我提到的那样，问题不会在其中出现。我也没有Mac，因此任何需要直接开发人员界面的解决方案都是不可能的。

任何人对我为什么会遇到这种行为有任何想法，或者对如何处理这种行为有任何建议？

代码

以下是处理过渡的代码，它们非常简单： 注意：为简洁起见，不包含浏览器前缀。

jQuery('.fade-up').one('inview', function() {
  jQuery(this).removeClass('no-display');
  jQuery(this).addClass('animated fadeInUp appear');
});

过渡本身：

@keyframes fadeInUp {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}
   .animated.fadeInUp {
    animation-name: fadeInUp;
}