Браузърите на iOS (Chrome/Safari) трептят при превъртане поради видео

В мобилното сафари забелязвам трептене на екрана всеки път, когато докосна ръба на превъртаема област, която съдържа HTML5 видео. Освен това изглежда, че превъртането трепти в различни други моменти.

Имам codepen, който копира този проблем тук - https://codepen.io/anon/pen/ZxabYR

Ето моят HTML:

<div class="item-content">
  <img src="https://res.cloudinary.com/storyforj/image/upload/c_limit,w_1500,f_auto,fl_lossy.preserve_transparency.progressive,q_auto/ugc/3Y7A8506_izkrbg">
  <img src="https://res.cloudinary.com/storyforj/image/upload/c_limit,w_1500,f_auto,fl_lossy.preserve_transparency.progressive,q_auto/ugc/3Y7A8506_izkrbg">
  <video controls loop autoplay controlslist="nodownload" playsinline>
    <source src="https://res.cloudinary.com/storyforj/video/upload/c_limit,w_1500,f_auto,fl_lossy,q_auto/ugc/Chop1_compressed_i4x9gt.webm" type="video/webm">
    <source src="https://res.cloudinary.com/storyforj/video/upload/c_limit,w_1500,f_auto,fl_lossy,q_auto/ugc/Chop1_compressed_i4x9gt.mp4" type="video/mp4">
    <source src="https://res.cloudinary.com/storyforj/video/upload/c_limit,w_1500,f_auto,fl_lossy,q_auto/ugc/Chop1_compressed_i4x9gt.ogv" type="video/ogg"> 
  </video>
</div>

и CSS:

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

.item-content {
  width: 100%;
  height: 100%;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

Неща, които опитах:
1. Опитвам се да ускоря хардуера с помощта на translate: transform3d и перспектива.
2. Опитвам се да деактивирам ефекта на еластичната лента, когато ударите ръба на екрана (не успях в това - не е ли възможно повече).

Всякакви идеи ще бъдат много оценени!


html css mobile-safari html5-video
person Parris    schedule 26.03.2018    source източник

Отговори (1)


arrow_upward
0
arrow_downward

Така че попълних грешка срещу webkit - https://bugs.webkit.org/show_bug.cgi?id=184025

Едно временно решение е да замените видеоплейъра с видеоплейър, базиран на платно - ето демонстрация https://codepen.io/anon/pen/JLOGWE. Тук има цял куп код, но с помощта на този https://github.com/Stanko/html-canvas-video-player пример, можете да инициализирате платно видео по следния начин:

var canvasVideo = new CanvasVideoPlayer({
    videoSelector: '.js-video',
    canvasSelector: '.js-canvas'
});
canvasVideo.play();

Това, разбира се, има своите проблеми и изисква повторно внедряване на някои основни функции, които нормалният видео плейър има. Въпреки това изглежда доста стабилен на iOS.

person Parris    schedule 28.03.2018