Chromium内核浏览器嵌入YouTube代码后页面中间出现缝隙问题求助

该缝隙是Chromium内核浏览器特有的亚像素渲染bug导致的：当容器宽度为奇数像素时，两个各占50%宽度的绝对定位伪元素渲染时会产生0.5px的计算误差，拼接后就会出现1px的间隙，YouTube iframe加载触发的页面重绘会放大这个渲染问题，Firefox的渲染逻辑不同因此不会复现。

修复方案 #

以下2种方案均不影响原有交互效果，任选其一即可：

方案1：背景兜底（最稳妥）

给滑动门父容器添加和伪元素完全一致的背景，就算出现亚像素间隙，漏出的背景和滑动门样式完全相同，视觉上无法感知到缝隙，兼容性最好：

.slide-wrap {
  background: url(https://picsum.photos/id/1015/1500/1500) no-repeat;
  background-attachment: fixed;
  background-size: cover;
}

方案2：重叠消除间隙

让两个滑动门产生微小重叠，直接覆盖可能出现的间隙，修改成本极低：
将两个滑动门的宽度设置为略大于50%即可，重叠部分用户完全无法感知：

.slide-wrap:before,
.slide-wrap:after {
  width: 50.1%;
}

也可以仅给右侧滑动门添加1px负左边距实现相同效果：

.slide-wrap:after {
  margin-left: -1px;
}

内容的提问来源于stack exchange，提问作者user16776772