ie background image blurry

 

https://hulint.tistory.com/26?category=1054923

sub-pixel rendering (ie11 background blur 버그)

위의 게시글처럼 sub-pixel rednedring 버그인거 같지만 어떤 상황에서 발생하는지 
확인하는 과정을 블로그에 남김

 

http://www.cssdesk.com/9LGrP

위의 사이트를 ie 11로 접근해서 이미지를 드래그&드랍을 하게 되면

첫번째 이미지에서 링크로 잡혀 있는 부분만

블루어 처리 되는걸 확인할 수 있다.

 

해당 이미지는 div영역에 백그라운드로 출력되도록 css가 설정되어 있고, 
동일한 이미지를 사용했으며 차이점은 첫번째 이미지는 가운데 정렬이 되어 있고
아래 이미지는 정렬이 되지 않았다는 것이다.

ie11 디버거를 이용해서 offset을 출력해보면 아래와 같이 나온다.

$(".inner1").offset();
{left: 329.5, top: 8}
document.querySelector('.inner1').offsetLeft
330

$(".inner2").offset();
{left: 8, top: 158}

dom api에서는 반올림되서 출력되지만 jquery를 이용했을 경우에는 소수점으로 출력된다.

TEST에 의하면 이미지 영역의 offset이 소수점으로 되어 있을 경우 백그라운드 이미지가 블루어 처리 된다. 

해결 방법은 백그라운드 대신 img 태그를 이용해서 콘텐츠를 구성하거나 , 

javascript를 이용해서 offset 을 소수점이 아닌 정수로 끝나도록 위치를 변경하는 방법이 있다.
( ie에서만 동작하도록 예외처리가 필요하다. )

var offsetLeft = $(".inner1").offset().left;
if ( parseInt(offsetLeft) != offsetLeft ) {
  $(".inner1").css('padding-left', '1px');
}
console.log( $(".inner1").offset() )

! 추가 

offset 값이 .5 일때 배경 이미지가 흔들린다. 
전체적으로 body에 padding-left 같은 값을 주면 된다.

if( $(window).width() % 2 == 1 ){ 
	$("body").css('padding-left' , '+=0.5') 
}