문제 사파리에서 hover시에 filter: drop-shadow 속성 적용이 안 되는 이슈가 있었다. // CSS .box { width: 300px; height: 300px; background: skyblue; color: white; } .box:hover { transform: translateY(10px); filter: drop-shadow(0, 2, 16, rgba(0 0 0 / 0.12)); } // HTML 원인 사파리에서 CSS filter 속성을 제대로 처리하지 못하는 렌더링 이슈이다. 대부분의 브라우저들은 filter 속성을 GPU를 통해 처리한다. 하지만 사파리에서는 filter 속성을 GPU가 아닌 CPU를 사용한다고 한다. filter는 복잡한 그래픽을 처리하기 때문에 그래..

문제 Safari에서는 비동기 함수안에서 window.open 호출 시 팝업이 차단될 수 있다. 약간의 trick을 이용해 팝업을 열 수 있다. 예시 팝업 X // 비동기함수를 통해 URL을 받아와서 팝업을 열때 차단된다. const url = await fetchUrl(); window.open(url, 'popupName', "width=500, height=600") 팝업 X // 빈 url은 비동기 호출 전에 만들어야한다. const url = await fetchUrl(); const popup = window.open(undefined, 'popupName', "width=500, height=600") popup.location.href = url 팝업 O // 빈 url 생성 후 url 변..