[모바일] Google Nexus 7에서 이미지 렌더링 이슈

문제점

Google Nexus 7에서 일부 이미지 해상도가 떨어지며,  이미지 주변으로 1px 정도의 실선이 보이는 문제를 발견했다. 미디어 쿼리로 고해상도 이미지를 분기 처리 하였지만 제대로 동작하지 않았다.
이 문제는  Android 4.4.2를 설치한 Google Nexus 7 2012 모델에서만 발생하고, 2013 모델에서는 발생하지 않았다.

 

원인과 해결책

1. 미디어 쿼리> Ratio 분기

고 해상도 이미지 대응용 미디어 쿼리에서 Ratio 최소 1.5부터 분기하는데, Nexus7의 2012 모델의 경우 Ratio가 1.3어서 분기 기준을 넘어서지 않았다.  [1. 기기별 Ratio 정보는 http://bjango.com/articles/min-device-pixel-ratio/ 를 참고]
Nexus7의 2012모델 사용자가 많거나 고해상도 이미지를 미디어 쿼리로 분기처리 한다면 pixel-ratio를 1.3으로 설정해야 한다.

@media screen and (-webkit-min-device-pixel-ratio:1.3){ ... }

2. 이미지 없거나 로딩 늦을 경우에 대한 대체 색상 정보 있는 경우

아래 코드에서 #ccc와 같은 배경색을 설정했다면 이미지 상하로 실선이 보인다.

{background:#ccc url(icon.gif)}

이 문제는 1번처럼 미디어 쿼리의 분기 기준을 Ratio 1.3으로만 변경해도 해결할 수 있다. 만약 미디어 쿼리로 분기하지 않고 고해상도 대응을 하고 있다면 아래와 같이 배경색을 제거한다.

{background:url(icon.gif)}