반응형
div에 background:url로 백그라운드 이미지를 지정하고, margin:auto를 이용하여 가운데 정렬을 하고
해당 영역에 a태그를 추가함
하지만 ie11에서 링크에 마우스를 가져가거나 클릭을 하게 되면 해당 영역의 이미지만 blur 처리가 되는걸 확인했다.
현재 발생하는 blur 상황은 아래와 같다.
- 탭으로 focus됐을때
- mouseover했을때
- 링크를 드래그 했을때
margin:auto 옵션을 제거후 테스트시에는 blur가 발생하지 않음.
중앙 정렬을 위해 다른 방법을 사용해도 동일하게 blur현상 발생
position:absolute;
width:1000px;
margin-left:-500px;
left:50%;
중앙정렬을 처리하는 속성중에 50%부분을 px로 변경하게 되면 blur 현상이 발생하지 않는다.
아무래도 브라우저가 위치를 잡을때 발생하는 버그로 추정함.
해당 현상은 sub-pixcel rendering 이라는 상황때문에 발생한걸로 판단함.
관련해서 구글링을 하다가 정리가 잘된 블로그가 있어 링크를 추가
위키 : https://en.wikipedia.org/wiki/Subpixel_rendering
반응형
'frontend' 카테고리의 다른 글
| ie background image blurry (0) | 2019.12.26 |
|---|