특정상태에서 텍스트가 흐릿하게보일 때

디자인을 입히려고 selectbox를 ul, li로 만들어줬다.

다른 화면의 select는 괜찮은데 특정 화면에서만! 테이블에 들어있는 select에서! option리스트가 흐릿하게 보이는 현상 ㅠ

무슨문제인지 감이 안잡혀서 f12에서 css를 하나씩 제거해봄, 결론은 overflow때문!

overflow는 option 종류가 많을경우에 무한으로 늘어질수없으니 height와 overflow-y:auto를 같이 적용했었음..

이문제를 해결하려고 css overflow cloudy, css overflow blur, css overflow blurry 등등 검색했는데

https://stackoverflow.com/questions/49349337/chrome-text-blur-with-overflow-yscroll-and-fixed-height

비슷한 질문이라 답변을 적용해 봤지만 해결 안됨..

더 검색하다가 발견한 질문글인데

https://css-tricks.com/forums/topic/blurry-text-in-chrome-and-opera-with-css-transform/

결론은 브라우저특정 렌더링방식에서 생긴 문제인거같다는 답변...

 

결국 혼자 찾은 해결방법은 overflow가 문제이니 overflow를 적용하기위한 div를  다시 추가해서 height와 overflow를 줬다