Problem

웹뷰를 작업하던 도중 video를 배경으로 사용하는 케이스가 존재해 구현하던 도중... mobile safari에서 poster -> video로 전환되면서 아래와 같이 깜빡거리는 현상이 발생했다.

관련해서 이슈를 찾아보았으나 관련된 내용이 많지 않았고, 임시 대응책을 고민해보았다.

background-image 추가하기

아래와 같이 video의 background-image로 poster를 추가해 임시로 대응해줄 수 있었다.

      <video
        src={video}
        poster={poster}
        style={{ width: 260, height: 200 }}
        autoPlay
        loop
        playsInline
        muted
        css={css`
          // mobile safari에서 poster -> video로 전환 시 깜빡임이 발생해 추가
          overflow: hidden;
          background-image: url(${poster});
          background-position: center;
          background-size: cover;
        `}
      />

placeholder -> video로 전환될 때의 영역을 background image가 채워줌으로서 깜빡임 현상을 임시로 해결해 줄 수 있었다.

아래는 결과물이다.