隐藏有视差视频的overflow-x不适用于iPhone

Question

我刚刚了解到，用户在查看我的网站时可以查看iPhone上的溢出内容。这仅在视差视频中发生。而且“溢出”内容并不是真正的溢出。只是他们可以将网站从一侧移到另一侧，并观看其他内容后面的视频。这仅在iPhone上发生。 android手机不会发生水平滚动。

有人知道会发生什么吗？

我的html：

<div class="ParallaxVideo ">
  <video autoplay muted loop playsinline>
  <source src="video/Piano.mp4" type="video/mp4">
  </video>
</div>

css：

html, body {
  position:relative;
  overflow-x:hidden;
  overflow-y: scroll !important;
  line-height: 1;
    min-height:100%;
    font-family:'Martel', serif!important;
}

.ParallaxVideo{ 
    height: 50vh;
    padding-bottom: 50px;
    padding-top: 50px; 
    width: 100%;
    overflow-x: hidden !important;
}
.ParallaxVideo video{ 
    width: 100%;
    position: fixed;
    top:0;
    z-index: -97;
}

@media only screen and (max-width: 500px) {
    .ParallaxVideo{ 
        height: 30vh;
        padding-bottom: 40px;
        padding-top: 40px; 
    }
    .ParallaxVideo video{ 
        width: 100%;
        position: fixed;
        top:50%;
        z-index: -97;
    }
}

我的网站是here。