[Tailwindcss] iOS Blur freezing 현상 (bug)

css 파일 관리를 따로 하지 않아도 되고

브라우저마다 css를 맞추지 않아도 되서 좋은 tailwindcss !!

 

하지만 제품에 사용하다보면 여러가지 버그를 맞이 하게 됩니다.

 

그 중 이번 버그는 blur(블러) 효과를 쓰면 발생하는 버그인데요.

https://tailwindcss.com/docs/blur

 

 

 

블러는 이미지를 흐리게 만드는 효과입니다.

 

 

 

많은 브라우저에서 오래전부터 지원되는 효과입니다.

 

사용은 간단합니다.

<div class="blur-none ...">
  <!-- ... -->
</div>
<div class="blur-sm ...">
  <!-- ... -->
</div>
<div class="blur-lg ...">
  <!-- ... -->
</div>
<div class="blur-2xl ...">
  <!-- ... -->
</div>

 

tailwindcss를 이용할댄 blur-{size} 형태로 적어주고.

순수 css를 할때는 아래처럼 호환성을 생각해서 -webkit까지 적어줍니다.

.bg-image {
	filter:blur(4px);
	-webkit-filter: blur(4px);
}

 

 

 

하지만 ios 15.1 부터 ios 17.1.1 에서 부터는 사파리에서 작동시키게 되면

프리징 현상이 발생합니다.

 

이미지를 변환하다보니 많은 연산처리가 필요한데

cpu만 사용하다보니 우선순위의 문제가 생겨 프리징 현상이 나오는듯 합니다.

 

 

그래서 브라우저에서 gpu를 강제로 사용하게 해야합니다.

 

tailwindcss에서는

class="transform-gpu"

class부분에 transform-gpu를 추가해주시고.

 

순수 css사용자는

transform: translate3d(0,0,0)


.bg-image {
	filter: blur(8px);
	-webkit-filter: blur(8px);
	transform: translate3d(0, 0, 0);
}

transform의 translate3d를 0,0,0으로 추가하시면 됩니다. 

3d로 이동시키는건데, 0,0,0 좌표로 이동시키면 그자리 그대로여서

gpu만 사용시키고, 실제로 쓰지 않는 모드가 됩니다.

 

이 방법으로 blur를 적용하면

프리징 현상 없이 자연스럽게 이용하실 수 잇습니다.