iOS Mobile Safari下Angular/Ionic的<video>覆盖上层内容问题求助

6年前曾出现过类似问题但未得到解答，目前我正遭遇完全相同的状况：

我的Angular/Ionic应用里的<video>标签在iOS Mobile Safari中会覆盖图片和两个按钮，无论尝试何种方法都无法解决！该问题仅出现在iOS Mobile Safari中，其他测试过的浏览器均正常工作。

在iOS Mobile Safari中，<img>和按钮会短暂出现后彻底消失，但奇怪的是，即使它们不可见，点击对应位置仍能触发按钮的点击事件。

HTML代码 #

<ion-row style="height: 87vh; background: black">
    <ion-col style="height: 100%" size="12">
        <div class="outside_home">
            <video playsinline [muted]="true" loop id="video" height="100%" autoplay>
                <source src="{{homeInfo().videoUrl}}" type="video/mp4">
                <source src="{{homeInfo().videoUrl}}" type="video/webm">
                <source src="{{homeInfo().videoUrl}}" type="video/mov">
            </video>
            <div class="inside">
                <ion-grid>
                    <ion-row class="ion-text-center ion-justify-content-center">
                        <ion-col size-xs="12" size-sm="10" size-md="8" size-lg="7" size-xl="6">
                            <picture>
                                <source type="image/webp">
                                <img [ngSrc]="homeInfo().homePageTitle" priority="true" alt="" style="min-height: 80px; display: block"
                                     width="" height="">
                            </picture>
                        </ion-col>
                    </ion-row>
                    <ion-row class="ion-text-center">
                        <ion-col size-sm="6" class="ion-text-sm-end" size-xs="12">
                            <div style="padding-right: 3%; padding-left: 3%">
                                <ion-button fill="outline" class="video_text" (click)="navigateToPage('connect')">
                                    Connect
                                </ion-button>
                            </div>
                        </ion-col>
                        <ion-col size-sm="6" class="ion-text-sm-start" size-xs="12">
                            <div style="padding-left: 3%; padding-right: 3%">
                                <ion-button fill="outline" class="video_text" (click)="navigateToPage('directions')">
                                    Join in Person
                                </ion-button>
                            </div>
                        </ion-col>
                    </ion-row>
                </ion-grid>
            </div>
        </div>
    </ion-col>
</ion-row>

视频文件格式为.mov。

CSS代码 #

div.outside_home {
  display: flex;
  position: absolute;
  width: 100%;
  min-height: 87vh;
  vertical-align: middle;
  justify-content: center;
}

div.inside {
  width: 100%; /* Can be in percentage also. */
  height: auto;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

我已经尝试添加overflow: visible、z-index定位等方法，但均无效，希望能得到解决思路。

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