iOS 15-16 Video Flickering Resolved with object-fit and Version-Specific Branching

In the V coloring service, screen flickering during video playback occurred after the iOS 15 update. To resolve this issue, which caused eye strain especially during full-screen swiping, the thumbnail display method and object-fit property were optimized in stages.

Structural Differences Between iOS and Android

Android includes video controls inside the swiper, but iOS required separating the video area outside the swiper due to the mute policy for autoplay. Initially, various attempts were made, such as removing thumbnails and changing load state values, but none fully resolved the issue.

object-fit Property Optimization

A problem was discovered with the existing approach of applying contain to horizontal videos and cover to vertical videos. This was because the cover value on iOS 15 caused unnatural rendering during the transition between thumbnail and video. The flickering was mitigated by changing the initial value to contain and switching to cover at load time.

Version-Specific Branching for iOS

The iOS 15.5 and iOS 16 updates caused width changes and flickering to recur when using object-fit cover. Accordingly, the version-specific characteristics were analyzed and branched as follows.

• iOS 15.0~15.4: Kept the existing code
• iOS 15.5~16.1: Changed object-fit to fill to remove the discomfort
• iOS 16.2 and above: Applied fill along with additional verification to prevent rendering anomalies

Additionally, visibility: hidden was applied instead of display: none to prevent reflow, and opacity was used instead of the display property, which cannot be transitioned, to control thumbnail flickering during swiping. Ultimately, a smooth screen transition was achieved through the combination of loaded/moving state values, image load position, and object-fit.