最近我在做响应式布局中的MP4视频嵌入，源视频文件本身是完全干净的，但遇到了一个头疼的间歇性问题：视频的边缘会出现细细的黑色伪影线条，有时候滚动页面的时候还会时隐时现。具体的问题表现如下：

• 仅在特定屏幕分辨率（比如100%缩放比例的1080p、1440p屏幕）和页面滚动过程中出现
• 线条只会出现在视频的底部或者右侧边缘
• 实际视频文件里根本没有这条线，滚动时会随机出现又消失
• 主要发生在Chrome和Edge这类基于Chromium的浏览器里

我期望的效果是：视频能完全填满容器，不管什么情况都看不到黑边或者伪影，同时保留容器原有的圆角、阴影等样式。

最小复现示例 #

下面是我简化后的代码结构，能复现这个问题：

HTML：

<div class="video-wrapper">
  <video src="video.mp4" autoplay muted loop></video>
</div>

CSS：

.video-wrapper {
  overflow: hidden;
  border-radius: 32px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12);
  border: 1px solid #c4c4c4;
}

.video-wrapper video {
  width: 100%;
  object-fit: cover;
}

我已经尝试过的解决方法（但都有缺陷） #

• 给容器和视频都添加了overflow: hidden，没有效果
• 用transform: scale(1.01)把视频稍微放大来遮住边缘，但这样会让视频出现模糊，影响视觉效果
• 用clip-path: inset()来裁剪边缘，虽然能遮住线条，但直接破坏了容器的阴影和圆角样式
• 给视频加left: 1px微调位置，结果只是把问题转移到了其他边缘，还带来了布局对齐的新问题

问题截图 #

这里有一张参考截图，能清晰看到视频边缘的那条细黑线：

我的疑问 #

1. 为什么这种黑色线条伪影只会在滚动时或者特定分辨率下出现？背后的原因是什么？
2. 有没有一种跨浏览器兼容、不会让视频模糊的方法，能保证用object-fit: cover的视频完全填满容器，不会出现边缘伪影——尤其是在带圆角、阴影的布局里？

内容来源于stack exchange