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` 속성에 대한 설명은 아래 링크를 참고하자.

카테고리

분류 전체보기 (710)
About me. (6)
Daylogs (675)
영어공부 (0)
My works - 추억 (29)
비공개 (0)