Safari 썸네일형 리스트형 backdrop-filter, box-shadow 크로스 브라우징하기 키워드: backdrop-filter, box-shadow, pseudo-element, nested-element, cross browsing 상황 아무런 효과가 없던 기존의 Header 배경을 backdrop-filter와 box-shadow를 이용하여 꾸미고자 한다. 윗 줄의 흰색 배경(Header)과 아랫줄의 회색 배경(Sub Menus)에 각각 backdrop-filter와 box-shadow를 적용해야했는데, 그 과정에서 Chrome/Safari css 오류가 생겼다. 오류 발생 과정과 해결법을 설명하고자 한다. 해결 과정 먼저 Header와 SubMenu에 각각 새로운 background-color, backdrop-filter, box-shadow를 적용해본다. // header.modul.. 더보기 safari, iPhone 예외 상황 대응하기(Navigation Gestures, new Date) 프로젝트: vegimap, tracking map 키워드: safari, iPhone, navigation gestures, date constructor, cross browsing 상황 1 vegimap은 지도가 화면 전체를 차지하고 있다. iphone에서 touch gesture로 지도를 이동하다보면 navigation gesture가 작동하여 페이지가 이전/이후로 이동해버릴 때가 있다. 지도 타일을 터치할 때는 navigation gesture가 작동하지 않도록 하고자 한다. 해결방법 1 특정 DOM element를 touch했을 때, navigation gesture가 실행되지 않도록 하는 custom hook을 작성한다. // useBlockNavigationGesture.ts import {.. 더보기 safari inset, intersection observer 크로스 브라우징하기 프로젝트: loplat X mobile 키워드: 크로스 브라우징, inset, intersection observer 상황 1 Modal을 구현할 때, 회색 배경을 position: fixed; inset: 0; 으로 구현했다. 아이폰 8(12.0.1)과 맥북 사파리 13으로 접속해보니 Modal이 전혀 보이지 않는 현상이 발생했다. 해결과정 Modal 컴포넌트는 createPortal을 이용하여 'portal' div를 부모로 삼아 렌더링한다. return ReactDOM.createPortal( {children}, document.getElementById('portal') as HTMLElement ); 사파리 개발자도구를 통해 확인해보니, portal DOM 의 children 내용은 잘 채워져.. 더보기 이전 1 다음
