레이어 팝업 픽셀이 깨져보이는 현상

오류사항

레이어팝업을 띄었을 때 내부 요소(border, font ,img)의 픽셀이 아래의 사진처럼 번져보이거나 깨져보임
(브라우저나 모니터 상황에 따라 다르게 보이거나 안보일수 있음)

발생원인

trnasform의 translate 오류
아래의 코드처럼 가운데 정렬을 하려고 할때 translate 계산이 소수점으로 떨어지거나 홀수로 떨어지게 되면 화면이 번져 보이거나 깨질수있음

• 픽셀은 소수점을 지원하지 않음

layer_wrap{position: fixed;}
layer{position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%)}

해결 방법

1. translate 세부적인 계산을 calc() css함수를 사용하여 수동으로 조절
2. 레이어팝업의 높이값을 고정 하거나 위치값을 고정으로 설정
3. 레이어팝업을 flex로 변경

1. calc() css함수 사용

야매인 방법 - 급한불 끌때 사용
레이어팝업의 크기가 달라지거나 보여지는 디바이스가 달라지면 깨져보일수있음
아래 처럼 화면을 보면서 제일 덜깨지는 것으로 숫자 변경하면서 조절하면 됨
- transform: translate(calc(-50% ± 1.1%),calc(-50% ± 1.1%))
- transform: translate(calc(-50% ± 1px),calc(-50% ± 1px))
- transform: translate(calc(-50% ± 0.1px),calc(-50% ± 0.1px))

2. 높이값 위치값 고정

레이어팝업의 높이값이나 위치값을 고정하면 됨

3. flex로 변경

flex를 사용하여 가운데 정렬로 변경해주면 translate특성을 사용할 필요없음

layer_wrap{position: fixed; display: flex; justify-content: center; flex-direction: column; width: 100%; height: 100%;}
layer{position: relative;}