노치 색 진단
아래 버튼을 하나씩 누르고 화면 맨 위 시계·배터리가 있는 띠가 빨개지는지 보세요. 빨개진 버튼이 곧 범인입니다. 하나 확인할 때마다 F로 되돌리고 다음으로 넘어가세요.
환경
safe-area-inset-top이 0px이면 본문이 노치 밑까지 올라가지 않는다는 뜻이라, 그 띠는 iOS가 그리는 영역이고 페이지 CSS로는 칠할 수 없습니다. 0이 아니면 페이지가 직접 칠하는 중입니다. 이 값 하나로 갈 길이 갈립니다.
실험
노치가 빨개지면 → meta가 살아 있고 런타임 변경도 먹는다
노치가 빨개지면 → body 배경이 소스이고 재샘플링이 실시간이다
노치가 빨개지면 → 가장자리 fixed 요소가 소스이고 '삽입'이 재샘플을 부른다
C는 안 되는데 D가 되면 → 크기가 아니라 가장자리 접촉이 조건
D는 안 되는데 E가 되면 → 최소 높이 조건이 있다(노치 높이만큼 덮어야 함)
다음 실험 전에 눌러 초기화