IOS17+ safari video size rendering compatibility issue

<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.