혜르미온느

css style 중 overflow는 상자에 맞추어 내용물을 조정할 수 있는 코드이다. 예를 들어 이런식으로 말이다. overflow 속성 중에 'hidden'이라는 속성은 상자에 맞게 콘텐츠가 잘리는 속성으로 스크롤 막대가 제공되지 않으며, 사용자의 스크롤 액션을 막아준다. 그래서 많은 실무자들이 모달 등을 띄웠을 때, 배경이 스크롤 되지 않게 하기 위하여 overflow: hidden을 통해 스크롤을 막아준다. 여기서 문제는 overflow: hidden은 모바일 사파리에서 지원되지 않는다는 점이다. 사파리 렌더링 엔진인 Webkit의 버그라고 한다. (혹시나 그럴리가 없는데? 우리는 overflow hidden을 통해서 스크롤을 잘 막고 있었는데?! 라고 생각하는 서비스가 있다면 두 손가락으로 스..

IOS에서 페이지가 오픈되었을 때, PageShow event가 실행되는데 이때 bfcache로 페이지가 열렸는지 아니면 아예 처음 새롭게 열린건치 체크할 수 있는 방법이 있다. 바로 다음과 같은 속성을 이용하면 된다. https://developer.mozilla.org/en-US/docs/Web/API/PageTransitionEvent/persisted PageTransitionEvent.persisted - Web APIs | MDN The persisted read-only property indicates if a webpage is loading from a cache. developer.mozilla.org addEventListener('pageshow', (event) => { if (..

모바일 safari에서는 beforeunload 대신에, pagehide 함수가 사용된다. - pagehide MDN https://developer.mozilla.org/en-US/docs/Web/API/Window/pagehide_event Window: pagehide event - Web APIs | MDN The pagehide event is sent to a Window when the browser hides the current page in the process of presenting a different page from the session's history. developer.mozilla.org 반대의 개념으로는 pageshow가 있다. https://developer.mozi..