Граница радиуса на элементе видео вызывает артефакты в браузере Chrome - PullRequest
Новая
       18

Граница радиуса на элементе видео вызывает артефакты в браузере Chrome

1 голос
/ 19 марта 2019

Итак, я столкнулся с интересной ошибкой, для которой мне пока не удалось найти решение, я попробовал ту, о которой мог подумать, безрезультатно.Проблема заключается в следующем -

Существуют артефакты (горизонтальные и вертикальные прозрачные линии) на элементе видео, если -

  1. border-radius непосредственно применено к элементу видео.
  2. border-radius применяется к родительскому элементу видеоэлемента с overflow: hidden.

Пример кода - 

<html>
  <body style="color: #fff;background-color: #00f;">
    <p>
      Original video is hosted at -
      <a style="color: #fff" 
         href="https://streamable.com/6jly2">
        https://streamable.com/6jly2
      </a>
      (create a download link and use it here)
    </p>
    <h1>Border Radius on VIDEO</h1>
    <video width="400px" style="border-radius: 30px;" autoplay muted loop>
      <source src="https://dl3.webmfiles.org/big-buck-bunny_trailer.webm" type='video/webm; codecs="vp8, vorbis"'>
    </video>
    <h1>Border Radius on Parent DIV</h1>
    <div style="display: inline-block;border-radius: 30px;overflow: hidden;">
      <video width="400px" autoplay muted loop>
        <source src="https://dl3.webmfiles.org/big-buck-bunny_trailer.webm" type='video/webm; codecs="vp8, vorbis"'>
      </video>
    </div>
    <h1>Border Radius with Child DIV</h1>
    <div style="display: inline-block;border-radius: 30px;overflow: hidden;">
      <div style="background-color: yellow;width: 400px;height: 225px;"></div>
    </div>
  </body>
</html>

Пример скриншота (сфокусируйтесь, чтобы увидеть белые линии) -

Example showing artefacts on the video element

ВСнимок экрана выглядит как белые линии, но на самом деле они прозрачные (сжатие на работе :(), вы можете воспроизвести сценарий в вашем регионе и увидеть точные явления.

Я использую Chrome 72.0.3626.121 (Официальная сборка) (64-разрядная версия) в Mac OS X.

Я считаю, что эта проблема вызвана логикой отсечения, которая может использоваться для достижения эффекта border-radius, не знаю навернякаЕсли кто-то знает, что это ошибка с документом, пожалуйста, дайте мне знать, так как я не смог ее найти, и, следовательно, попросил сообщество здесь.

Мне удалось найти одну подобную проблему здесь - Chrome / WebKit создает сплошную полосу при использовании фона, границ радиуса и верхних / нижних границ

Но это не принесло успеха. Если у кого-то есть идеи относительно того, почему это происходит и чтоможет быть решением (даже если не доступно, я будубудьте счастливы понять почему), пожалуйста, помогите.

...