우당탕탕 FE 개발자 이야기

모바일 웹에서 폼(form) 작업 중 input을 선택하면 키보드가 올라오면서 화면이 이상한 곳으로 튕겨나가는 경험, 다들 한 번쯤 있으시죠? 특히 iOS Safari에서만 발생하는 이 버그 때문에 저는 3시간을 날렸습니다... 😭 오늘은 그 삽질의 결과물을 공유하려고 합니다. 문제의 원인부터 4가지 해결 방법까지 완벽 정리했으니, 같은 문제로 고통받고 계신 분들께 도움이 되길 바랍니다!🔥 문제 상황폼 입력 페이지를 개발하던 중, iOS Safari에서만 다음과 같은 현상이 발생했습니다:사용자가 input 필드를 탭하여 포커스키보드가 올라옴키보드 활성화 상태로 아래 다른 input 필드를 탭하여 포커스🚨 화면 전체가 예상치 못한 위치로 스크롤됨심한 경우 화면이 뷰포트 밖으로 완전히 튕겨나가서 빈 화..

iOS 앱 내에서 웹뷰(WebView)를 사용하여 비디오 콘텐츠를 보여줄 때, 영상 썸네일이 하얗게 표시되는 '백화 현상'은 많은 개발자들이 겪는 문제입니다. 저 역시 이 문제로 고생했지만, poster 속성과 playsinline 속성을 함께 사용하는 간단한 방법으로 해결할 수 있었습니다. 이 글에서는 저와 같은 문제를 겪는 분들을 위해 iOS WebView에서 비디오 썸네일 백화 현상이 발생하는 원인을 분석하고, 이를 해결할 수 있는 효과적인 방법들을 공유하고자 합니다. 백화 현상의 주요 원인iOS WebView의 비디오 썸네일 백화 현상은 주로 WKWebView의 비디오 재생 정책과 GPU 렌더링 방식 때문에 발생합니다.자동 재생(Autoplay) 정책: iOS의 Safari 및 WKWebView는..