[Web] HTML content, text blurry: transform + border-radius, zoom in and out

문제

HTML DOM content text가 흐릿하게 보이는 현상

흐릿한 모습

정상

원인

transform: translate(50px, 100px);

위와 같이 transfrom css가 적용된 상태에서 이 사용된 상태에서
연속된 하위 돔 중 border-radius css 하나 이상 적용된 상태에 이런 현상이 나타는 것 확인

해결

tranform이 적용된 돔 하위 자식 노드 중 하나에만 border-radius를 적용