CSS backdrop-filter, MS Edge에서 작동 오류

실행 환경: 윈도우 11(PC), 마이크로소프트 엣지 123.0.242081

임시 복구: 엣지의 설정 / 시스템 / "사용 가능한 경우 그래픽 가속 사용" 변경

 

※ "그래픽 (하드웨어) 가속 기능" 활성화시키면 유튜브 일부 동영상 재생할 때 끊김 현상이나 이미지가 일그러지는 사례가 발생할 수 있습니다. 

※ 핸드폰과 같은 모바일 환경의 웹 브라우저에서는 필터 기능 정상입니다.

 

MS Edge 버전

 

.filter {
	-webkit-backdrop-filter: saturate(180%) blur(20px);
	backdrop-filter: saturate(180%) blur(20px);
	background-color: rgba(0,0,0,0.3);
}

 

웹 페이지에 반투명한 간유리 효과를 주는 backdrop-filter입니다.

구글 크롬 웹브라우저에서는 정상적으로 작동하고, 같은 Chromium 엔진을 사용하는 마이크로소프트 엣지에서 blur 효과가 적용되지 않는 문제가 발생합니다. 호환성을 유지하려면 다른 필터를 사용하는 것이 안전합니다.

 

backdrop-filter 정상

 

backdrop-filter 오류

 

해당 증상이 나타난 시기가 1년이 넘습니다. 임시로 backdrop-filter 코드가 엣지에서 blur 효과를 나타내려면 웹 페이지 접속자의 엣지 웹 브라우저에서 그래픽 가속 기능을 끄거나 켜야 합니다. 접속자 인터넷 기기(PC)에 설치된 그래픽 드라이버의 버전과도 연관이 있습니다. 다른 드라이버 설치로 필터 기능의 오류 현상에 변동이 발생할 수 있습니다. 그래픽 가속 기능은 갖가지 오류 발생의 주범입니다.

 

그래픽 가속 기능 정지 상태

 

그래픽 가속 기능 활성화를 위한 변경 및 다시 시작 준비

 

그래픽 가속 기능의 설정을 변경하면 브라우저를 다시 시작해야 변경 내용이 반영됩니다.