Проблема
У меня есть веб-страница, над которой я работаю, которая использует простые переходы с постепенным увеличением и уменьшением на элементах страницы при загрузке.
Они работают нормально, за исключением того, что у меня возникла проблема с Chrome для iOS.Как ни странно, проблема не воспроизводится ни в каких других браузерах и не возникает при тестировании, скажем, BrowserStack.Но, похоже, это происходит только при использовании реального iPhone или iPad только в Chrome.
Что происходит, когда текст исчезает, а затем непрозрачность возвращается к 0, и он снова исчезает.
Поскольку это происходит только на реальных устройствах, у меня возникают трудности с отслеживаниемисточник проблемы.Очевидно, что я смог определить переходы как источник проблемы, но до сих пор мне не удалось выяснить, почему это происходит, и только в одном браузере на реальных устройствах.Я не уверен в том, как использовать средства разработки прямо на мобильном устройстве, обычно я просто эмулирую его в виртуальной машине, но, как я уже говорил, проблемы там не возникает.У меня также нет 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;
}