모바일 사파리에서 overflow 버그 해결하기
css style 중 overflow는 상자에 맞추어 내용물을 조정할 수 있는 코드이다. 예를 들어 이런식으로 말이다. overflow 속성 중에 'hidden'이라는 속성은 상자에 맞게 콘텐츠가 잘리는 속성으로 스크롤 막대가 제공되지 않으며, 사용자의 스크롤 액션을 막아준다. 그래서 많은 실무자들이 모달 등을 띄웠을 때, 배경이 스크롤 되지 않게 하기 위하여 overflow: hidden을 통해 스크롤을 막아준다. 여기서 문제는 overflow: hidden은 모바일 사파리에서 지원되지 않는다는 점이다. 사파리 렌더링 엔진인 Webkit의 버그라고 한다. (혹시나 그럴리가 없는데? 우리는 overflow hidden을 통해서 스크롤을 잘 막고 있었는데?! 라고 생각하는 서비스가 있다면 두 손가락으로 스..
JavaScript/JS
2022. 9. 20. 23:12
공지사항
최근에 올라온 글
최근에 달린 댓글
- Total
- Today
- Yesterday
링크
TAG
- 리액트훅
- storybookUI
- 김민태
- react
- 깃
- 모바일사파리
- 깃명령어
- 리코일
- js테스트
- 자바스크립트
- 센트리모니터링
- 리액트상태관리
- 리액트
- 센트리
- vue
- javascript
- 프론트엔드
- reacthook
- 프론트앤드
- 크롬
- sentry
- TIL
- CSS
- js
- BFCache
- gitRebase
- 사파리
- npm
- Git
- frontend
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 | 31 |
글 보관함