html video标签黑线问题video标签容器存在时有时无的黑线，此黑线并非视频与容器大小不匹配的黑边 video标

问题表现

1、video标签容器存在时有时无的黑线，此黑线并非视频与容器大小不匹配的黑边

2、页面滚动时黑线消失

3、截图时（无论系统截图、QQ截图）黑线消失，录屏时黑线也消失

4、此问题出现在Chrome内核浏览器上，Firefox浏览器无此问题

效果图（注：此处有意设置元素宽度为800.5px）

问题代码

<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            width: 800.5px;
        }

        video {
            display: block;
            width: 100%;
            object-fit: cover;
            /* mix-blend-mode: screen; */
        }
    </style>
</head>
<body>
<div id="div">
    <video id="video" src="video.mp4"  ></video>
</div>
<div style="height: 800px;">
    撑大用容器
</div>

</body>
<script>
    const Video = document.getElementById("video")
    Video.loop = true
    Video.autoplay = true;
    Video.muted = true;
</script>
</html>

原因推测

video标签宽高像素数存在小数点，导致视频与容器存在间距

事实也确实如此，手动设置宽高为整数即可消除

问题解决

方案一：设置宽高为整数值。

方案二：对于难以设置固定值的情况，例如需要根据页面动态改变容器宽高。查阅资料发现有一个办法，设置video标签css mix-blend-mode属性为任意的、非normal的、有效的值，具体原理不清楚