<div class="container" style="background-size: contain; user-select: none; pointer-events: none; height: 787.5px; width: 1400px;">
<div class="container__header">header</div>
<span>
<div class="video-container" style="inset: 17.853% 68% 11.747% 1%; z-index: 2; opacity: 1;">
<div class="video-container__placeholder-image">image</div>
<div class="video-container__content">
<div class="some-info"></div>
<div class="video-canvas"></div>
<div class="other-info"></div>
</div>
</div>
<div class="video-container" style="inset: 17.853% 1% 11.747% 33%; z-index: 1; opacity: 1;">
<div class="video-container__placeholder-image">image</div>
<div class="video-container__content">
<div class="video-canvas">
<div class="player" style="width: 100%; height: 100%; position: relative; overflow: hidden; background-color: black;">
<video playsinline="" muted="" style="object-fit: cover; width: 100%; height: 100%; position: absolute; left: 0px; top: 0px;"></video>
</div>
</div>
</div>
</div>
</span>
</div>
The page looks like
Then, the html changed as follows,
<div class="container" style="background-size: contain; user-select: none; pointer-events: none; height: 787.5px; width: 1400px;">
<div class="container__header">header</div>
<span>
<div class="video-container" style="inset: 100% 100% 0% 0%; z-index: 2; opacity: 0;">
<div class="video-container__placeholder-image">image</div>
<div class="video-container__content">
<div class="some-info"></div>
<div class="video-canvas"></div>
<div class="other-info"></div>
</div>
</div>
<div class="video-container" style="style="inset: 6.106% 5.98719% 0%; z-index: 3; opacity: 1;"">
<div class="video-container__placeholder-image">image</div>
<div class="video-container__content">
<div class="video-canvas">
<div class="player" style="width: 100%; height: 100%; position: relative; overflow: hidden; background-color: black;">
<video playsinline="" muted="" style="object-fit: cover; width: 100%; height: 100%; position: absolute; left: 0px; top: 0px;"></video>
</div>
</div>
</div>
</div>
</span>
</div>
From the mac developer tools, the width of the video is 1400px, but it render like the size is same as before in iOS17+(iOS17.1 and iOS17.3.1).
The expected results looks like
the actual results are looks like
I tried the same operators in iOS 14.6 and 16.4 and it worked as expected, this problem likes only exists in iOS17+.
Please help me to resolve this problom. Thanks.