Question

因此，我遇到了一个有趣的错误，但我尚未找到解决方案，我尝试了我能想到的错误，但没有结果。问题如下-

如果--p，则视频元素上存在伪影（水平和垂直透视线）

border-radius直接应用于视频元素。
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>

示例屏幕截图（难以看清白线）-

在屏幕截图中，线条似乎是白色的，但实际上它们是透明的（工作中的压缩:(），您可以在本地复制场景并查看确切的现象。

我在Mac OS X上使用Chrome 72.0.3626.121（正式版本）（64位）。

我相信，此问题是由可能用于实现border-radius效果的削波逻辑引起的，尚不确定。如果有人知道这是一个文档错误，请告诉我，因为我找不到它，因此在这里询问社区。

我确实在这里找到了一个类似的问题-Chrome/WebKit creating a solid bar when using background, border-radius, and top/bottom borders

但是这样做没有成功。如果有人对发生这种情况的原因以及解决方案有什么想法（即使没有答案，我也会很高兴理解为什么），请帮忙。

视频元素的边框半径正在Chrome浏览器中引起伪像

0 个答案: