fix: iOS 설치형 PWA 상단 UI 블러 및 safe area 겹침 수정 - #53
Merged
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
배경
iOS Safari에서는 정상으로 보이지만 홈 화면에 설치한 PWA에서는 상태 표시줄 영역이 앱 콘텐츠 위에 반투명하게 겹쳤습니다. 이 때문에 햄버거 버튼, 대화 제목, 로고 등 상단 UI가 흐려지거나 잘린 것처럼 보였습니다.
원인
apple-mobile-web-app-status-bar-style의black-translucent가 설치형 PWA에서 웹 콘텐츠를 상태 표시줄 아래까지 확장했습니다.backdrop-blur와 반투명 배경이 적용되어 iOS 네이티브 상태 표시줄 효과와 중첩됐습니다.@layer base에 있어 뒤에서 생성되는.inset-0유틸리티에 덮이는 경우가 있었습니다.변경 사항
black-translucent에서black으로 변경했습니다.pwa-status-bar-surface를 추가하고 앱 콘텐츠와 분리했습니다.env(safe-area-inset-top)아래에서 시작하도록 했습니다.검증
npm run typecheck통과npm run lint통과npm run build:client통과참고
상태 표시줄 메타 설정은 iOS가 설치 시 캐시할 수 있으므로 기존 홈 화면 앱에서는 삭제 후 Safari에서 다시 홈 화면에 추가해야 변경이 확실히 반영됩니다.