Мне пришлось отказаться от использования jQuery fadeIn() и fadeOut() из-за проблем с производительностью на мобильном устройстве (например, на планшете и телефоне). Итак, я переписал свой код, чтобы использовать только переходы css для замирания.Таким образом, проблемы с производительностью были решены.Это означает, что анимации теперь воспроизводятся плавно не только на настольных устройствах, но и на мобильных устройствах.Но есть одна странная проблема с этим методом.Только когда браузер на мобильном устройстве переключается в полноэкранный режим, дочерние элементы видео, содержащие элементы div, содержащие видео, перестают появляться и исчезать.Обратите внимание, что не div, а дочернее видео div перестает исчезать и начинает прыгать и выключаться.Кажется, что сам div исчезает правильно, так как я вижу, что его границы и фон появляются / исчезают медленно.Как только я выхожу из полноэкранного режима, все возвращается в нормальное состояние и работает отлично.
Я действительно нашел решение hacky-wacky-sneaky для достижения того же эффекта замирания в полноэкранном режиме.Снова используя opacity:0; и opacity:1;, пока переход css установлен как transition: opacity 1s;, мне нужно было добавить еще один div с сплошным черным фоном, который наложен поверх элемента, содержащего видео, используя position: absolute илиposition: fixed.Теперь это выглядит так же, как видео исчезает, хотя это просто еще один div, охватывающий область видео.