크리스 통화 스크롤 그림자 그가 가장 좋아하는 CSS-Tricks 중 하나입니다. 레아 베로 대중화 된 약간의 영리한 XNUMX개의 레이어 배경 그라디언트를 사용하는 순수한 CSS 접근 방식 background-attachment 마법. 그 결과 스크롤 가능한 컨테이너에서 추가 콘텐츠를 사용할 수 있다는 힌트를 사용자에게 제공하는 매끄러운 스크롤 상호 작용이 생성됩니다.
단 하나의 문제: 그것 파산하다 Safari iOS 13에서. 어느 날 모든 것이 좋았습니다. 다음, 별로. 영향을 받은 것은 이뿐만이 아니었습니다. Keith Clark의 CSS 전용 시차 효과 도 그때쯤 일을 멈췄다.
글쎄, 독자 로널드가 썼다 모든 것이 다시 한 번 작동한다고 말합니다! 사실 저는 지금 이 글을 아이패드(Safari 15.5)로 작성하고 있으며 Chris의 데모는 그 어느 때보다 선명하게 보입니다. 키이스도 마찬가지 원래 데모.
그래서, 무엇이 그것을 깨뜨 렸습니까? 우리는 아직 모른다. 하지만 사파리 13 출시 노트 단서를 제공:
- 모든 프레임에 대한 한 손가락 가속 스크롤 지원 추가 및
overflow:scroll필요를 제거하는 요소set-webkit-overflow-scrolling: touch.- 가로 스크롤이 필요한 반응형 메타 태그가 있는 와이드 웹 페이지에 대해 iPad의 기본 동작을 변경했습니다. 페이지는 수평 스크롤을 방지하기 위해 크기가 조정되고 모든 텍스트는 가독성을 유지하기 위해 크기가 조정됩니다.
언제 수정되었고 무엇이 수정되었습니까? 글쎄, 스크롤 그림자 측면에서 Safari 15.4 포함 일부 작업 background-attachment: local 트릭을 수행했을 수 있습니다. 시차 측면에서 Safari 14.1 추가 개별 변환 속성에 대한 지원... 그래서 아마도?
