#css

iOS Safari 에서만 양방향 화살표로 보이는 select 를 appearance 리셋으로 통일하고, data-uri SVG 에는 CSS 변수가 먹지 않아 DOM 오버레이를 쓰게 된 이유를 정리했습니다.

iframe 안에서 모달이 뜰 때 부모 화면 전체를 딤 처리하려다 조상의 z-index:0 stacking context 에 막힌 원인과, 딤이 켜진 동안만 풀어 주는 해법을 정리했습니다.

같은 컴포넌트인데 iframe 화면에서만 position:sticky 가 먹지 않았던 원인은 루트의 overflow:hidden 이었습니다. 스크롤 컨테이너 기준과 flex 높이 협상의 함정까지 다룹니다.

reduced-motion 설정 시 루프 애니메이션이 사라지는 문제를 해결하기 위해 음수 animation-delay와 paused 속성을 활용해 특정 프레임에 멈추게 하는 방법과 이를 활용한 스크린샷 검수 팁을 소개합니다

툴팁 같은 래퍼 컴포넌트가 부모의 flex 계산에 개입해 레이아웃을 깨뜨리는 문제를 해결하기 위해 래퍼의 flex 속성을 옵션으로 분리하고 레이아웃 설계 시 호출부의 영향력을 고려하는 방법을 제안합니다

background-clip을 content-box로 설정하면 padding 두께만큼 border-radius가 깎여 의도치 않게 각진 모양이 되는데, 이를 해결하려면 슬래시 문법을 사용해 가로와 세로 반경을 개별적으로 보정해야 합니다

disabled 버튼은 포인터 이벤트를 차단해 툴팁 표시를 방해하므로 CSS의 pointer-events: none을 활용해 이벤트를 부모 요소로 전달하는 해결법과 함께 키보드 사용자를 위한 접근성 보완책을 제시합니다

iOS Safari 는 키보드가 떠도 레이아웃 뷰포트를 줄이지 않아 모달이 키보드 뒤에 가려지는데, visualViewport 로 가린 높이를 구해 padding-bottom 에 더하면 정렬을 안 바꾸고도 해결됩니다.