CSS - safari에서 filter 속성 적용 안되는 문제

브라우저 테스트 중에 safari에서 filter 속성이 정상적으로 적용이 되지 않는 이슈가 발견됐다. 

블러효과를 주기 위해서 filter 속성을 사용했는데 전혀 적용되지 않았다. 

.circle {
	filter: drop-shadow(0 0 5px red);
}

그래서 접두어를 붙여서 다시 적용해보았지만 역시나 실패....

.circle {
	filter: drop-shadow(0 0 5px red);
    -webkit-filter: drop-shadow(0 0 5px red);
}

safari에서 svg 태그에 filter 효과를 주기 위해서는 svg 태그를 다른 태그로 감싸고 그 감싼 태그에 filter 효과를 적용 시켜야 한다고 한다. 

/* html */  
<div class="container">
	<svg class="circle">...</svg>
</div>


/* css */
.container {
	filter: drop-shadow(0 0 5px red);
    -webkit-filter: drop-shadow(0 0 5px red);
}

safari에서도 정상적으로 css가 적용된다!