mix-blend-mode를 썻더니 흐려진다고?! 렌더링 이슈

어느날 로그인 모달을 만드는데, 로그인 인풋에 텍스트를 입력하니 갑자기 모달 전체가 흐려졌다

 

의도하는것도 쉽지 않을듯한 이런 일이..? 예상가는 부분이 없어서

태그를 하나씩 숨기면서 테스트해보니 밑에 SNS 로그인 버튼쪽에 문제가 있었고,

그 중에 mix-blend-mode: luminosity; 가 문제였다.

 

 

 

원인은 찾았는데 이유를 모르겠어서 구글링했더니 원하는 답이 없었고, 챗지피티한테 물어봤더니

- mix-blend-mode: luminosity; 를 적용했을 때, 주변 요소가 흐려지거나(특히 텍스트가 뿌옇게 보이는 현상) 전체 컴포넌트가 예상치 못한 방식으로 렌더링되는 문제는 비교적 자주 언급되는 이슈 중 하나
- 특정 브라우저(주로 Chrome)나 GPU 가속 환경에서 발생하는 렌더링 버그
- 그 외에도 대안/우회책을 알려줬는데.. 그거로 해결되진 않았다.

 

 

 

그러다가 문득.. mix-blend-mode말고도 채도 조절이 가능했던 css가 있었던게 생각나서 찾아보니

filter: saturate(0%);가 있었고.. 그걸로 변경하니 문제가 생기지 않았다.

 

사실 아주 바보같은 이슈였다! 용도에 맞지않게 남용하고있으니 렌더링 버그가 발생한것..

mix-blend-mode: 요소의 배경과 해당 요소의 내용물을 블렌딩하는 방법을 결정
filter: 요소에 대한 시각효과를 지정

 

나는 해당 요소만 채도조절을 하면되는데, 불필요하게 더 무거운 css를 적용하고 있었던것이다.

 

 

 

단순한 실수였지만..

mix-blend-mode를 쓸땐, 영향을 받을 수 있는 요소에 텍스트를 넣지 않아야겠다는건 이번에 배웠다.

 

챗지피티의 대안에서도 텍스트만 3D transform으로 분리한다던가, 레이어 자체를 분리한다던가 등을 제안하는걸로봐선.. 텍스트에 mix-blend-mode를 적용할 레이어엔 요소가 많지 않도록 하던가, 텍스트는 지양하는게 좋을거같다.

 

 

mix-blend-mode는 아래 준비중인 버튼에만 적용되는것이지만, 그로 인해 전체 렌더링에 영향이 가서 모달 전체가 흐려짐

 

filter로 바꾸니 선명해짐