사파리에서 hover시 filter 속성 적용안되는 이슈
·
프론트엔드/Javascript
문제 사파리에서 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는 복잡한 그래픽을 처리하기 때문에 그래..