Overlay looks like a blur

[sungik-choi]

현재상황

가끔 오버레이가 흐려보이는 경우가 있음.

재현 방법

오버레이의 transform 이 소수점으로 들어가게 되면, 안티앨리어싱때문에 흐릿해보이는 현상이 발생하게 됨.

기대한 동작

흐릿해지면 안됨. 즉, 소수점으로 위치가 지정되면 안됨.

실제 동작

위에서 설명. 현재 Overlay가 getBoundingClientRect를 사용해서 위치를 계산하고 있기 때문인데, 이를 offset 속성으로 변경해서 Integer로 위치를 계산하도록 하면 흐릿해보이는 현상이 사라질 거로 예상함.

Reference

• https://stackoverflow.com/questions/18257132/is-it-possible-to-snap-to-pixel-after-a-css-translate
• Channel Thread

[ch-builder]

:tada: This issue has been resolved in version 1.0.0-next-v1.4 :tada:

The release is available on:

• npm package (@next-v1 dist-tag)
• GitHub release

Your semantic-release bot :package::rocket:

[sungik-choi]

해당 이슈 다시 발생하는 거 같아 재확인중입니다.

[sungik-choi]

Mac 기준, 사파리와 파이어폭스에선 문제 없습니다.

크롬에서 화면 배율을 100% 아래로 했을 때 여전히 뿌옇게 보이는 현상이 발생합니다. perspective: 1px 을 주었을 때 어느정도 완화되기는 하는데, 그래도 여전히 뿌옇습니다.

[sungik-choi]

버그 발생: https://desk.channel.io/root/groups/Bug-10/61b7750a93b65a5efb83

[junbong]

그간 저 이슈랑 비슷해 보이는 문제가 몇번 있었습니다. 리액션 개발할 때 리액션 이모지가 좀 잘린다거나 해서 옵티마이징 했던 기억이 있습니다. 크롬에서는 발생하지 않는 것으로 보아 일렉트론 버전업이 필요하다고 봅니다. 일렉트론 버전업은 제가 챙겨볼게요. (잘린다기 보다는 소수일 때 좀 이상하게 나왔어요. 찌그러지게? 정확히 기억은 안나는데 이 문제와 비슷한 문제일거라 생각합니다)