Post

Replies

Boosts

Views

Activity

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.
1
0
704
Mar ’24