全屏滑动页面。视频在下，文字在上，滑动到这一屏的时候，文字断续地显示

Question

如题。显示的截图如下：

用的是win10的edge浏览器，其他页面的文字显示正常，一碰到有视频的页面就是这样，请问是什么原因呢？
而且整个刷新一页页滑下来的时候是没有问题的，但是滑回上一页，再滑下来到视频页，就变成这样了.
如果把视频设为不播放，也不会出现这种情况
代码如下：
HTML：

<div class="section" id="section4">
    <div class="mac">
        <h2>3D打印专属你的<i class="br"></i>仿生学定制耳机</h2>
        <p>选用医用级光固化树脂作为外壳材质，对皮肤零刺激，舒适健康。</p>
    </div>
    <video id="video3d" loop="loop" poster="images/p05.jpg" src="video/p04.mp4">
        您的浏览器不支持video标签。
    </video>
</div>

CSS：

#section4{background:url(../images/p05.jpg) no-repeat center;background-size: cover;position: relative;}
#section4 #video3d{width:100%;height:auto;object-fit: fill;}
#section4 .mac{position:absolute;top:50%;left:0;width:100%;text-align: center;color:#fff;transform: translateY(-50%);}
#section4 .mac h2{margin-bottom:40px;letter-spacing: 5px;}
#section4 .mac p{font-size:18px;line-height:38px;letter-spacing: 2px;}