배너 이미지

CSS filter blur 렉 해결하기

최종 수정일 : (11개월 전)

css의 filter blur의 렉이 생각보다 심하더라고요.
평상시엔 렉이 전혀 없는데, 이미지를 불러오는 등 특정 작업을 하고 있을 땐 꽤 심하게 버벅댑니다.

#element {
transform: translateZ(0);
will-change: transform;
backface-visibility: hidden;
transition: .5s
}

#element:hover {
filter: blur(5px)
}

위 코드를 사용해 어느 정도 해결했습니다.

항상 생기는 렉도 아니고, 테스트 중인 GPU도 1660TI로 그리 나쁜 제품은 또 아니라서, 모든 기기에서 해결되었는진 아직 테스트를 더 해봐야 하지만, 렉은 확실히 줄었습니다.


profile

이메일 주소는 공개되지 않습니다. 필수 필드는 *로 표시됩니다

주의 : 비밀 댓글 사용 시 수정 기능을 이용할 수 있는 시간이 지나면 작성자도 내용 확인이 불가능합니다.