CSS3 필터 위에 엘리먼트가 렌더링 될 때 깨지는 문제

발생일: 2014.04.11

키워드: backface-visibility, CSS3 필터, CSS3 filter

문제:

현재 서비스에 CSS3 blur 필터를 적용한 부분이 있다.

원본 이미지 아래에 블러가 적용된 이미지를 배경으로 넓게 표시하고 있는데,

대략 아래와 같은 태그 구조를 갖고 있다.

<img src=“배경” style=“width:100%;filter: blur(5px);”>

<img src=“원본” style=“width:50%;">

헌데, 이 이미지 위에 레이어 팝업으로 새로 엘리먼트를 추가하면,

레이어가 깨져서 이상하게 렌더링 되는 이슈가 있었다.

어떻게 하면 좋을까?

해결책:

옆자리 D가 해결책을 찾아냈다.

원본 이미지에 `backface-visibility` 속성을 `hidden`으로 할당하는 방법이다.

<img src=“배경” style=“width:100%;filter: blur(5px)”>

<img src=“원본” style=“width:50%;backface-visibility: hidden;"> 

`backface-visibility` 속성에 대한 설명은 아래 링크를 참고하자.

https://developer.mozilla.org/en-US/docs/Web/CSS/backface-visibility