하이브리드 앱 개발 과정에서 특정 이미지가 흐릿하게 표시되는 문제가 있었다.
PC에서 에뮬레이션할 때는 나타나지 않았고, 또 모든 스마트폰에서 나타나는 것도 아니었고,
주로 안드로이드 4.1 이하 WebView가 아직 Chrome 기반이 아닌 경우에 나타났고, 모바일 크롬에서는 또 정상적이었다.
삼성 스마트폰의 내장 브라우저에서 주로 나타났고, 구형 iOS 기기에서도 나타났다.
원인은 다음과 같이 예상되었다.
1. swipe를 적용하면서 translate3d 등의 속성으로 그래픽 가속을 적용하며 이미지가 흐려진다?
2. 이미지 자체의 이상으로 화면 크기로 이미지가 zooming 되었을 때 흐려진다?
stackoverflow 에서는 대부분 translate3d(0, 0, 0) 혹은 translateZ(0) 등의 설정을 적용하면 정상적으로 돌아온다고 설명하고 있었다.
하지만 이미 이 설정은 적용 중이었기 때문에 설정을 넣거나 뺀 후에도 변화가 없었다.
몇 시간을 구글링한 끝에 아래의 글을 읽게 되었다.
https://forum.jquery.com/topic/android-visual-quality-problems-pages-looks-cheep-pixelated-forms-images-with-tons-of-blur
target-densitydpi 를 meta 태그에 넣은 뒤로 정상화되었다는 코멘트가 눈에 띄었고, 아래와 같이 적용 후 정상화 되었다.
PC에서 에뮬레이션할 때는 나타나지 않았고, 또 모든 스마트폰에서 나타나는 것도 아니었고,
주로 안드로이드 4.1 이하 WebView가 아직 Chrome 기반이 아닌 경우에 나타났고, 모바일 크롬에서는 또 정상적이었다.
삼성 스마트폰의 내장 브라우저에서 주로 나타났고, 구형 iOS 기기에서도 나타났다.
원인은 다음과 같이 예상되었다.
1. swipe를 적용하면서 translate3d 등의 속성으로 그래픽 가속을 적용하며 이미지가 흐려진다?
2. 이미지 자체의 이상으로 화면 크기로 이미지가 zooming 되었을 때 흐려진다?
stackoverflow 에서는 대부분 translate3d(0, 0, 0) 혹은 translateZ(0) 등의 설정을 적용하면 정상적으로 돌아온다고 설명하고 있었다.
하지만 이미 이 설정은 적용 중이었기 때문에 설정을 넣거나 뺀 후에도 변화가 없었다.
몇 시간을 구글링한 끝에 아래의 글을 읽게 되었다.
https://forum.jquery.com/topic/android-visual-quality-problems-pages-looks-cheep-pixelated-forms-images-with-tons-of-blur
target-densitydpi 를 meta 태그에 넣은 뒤로 정상화되었다는 코멘트가 눈에 띄었고, 아래와 같이 적용 후 정상화 되었다.
<meta name="viewport" content="target-densitydpi=device-dpi, user-scalable=0, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, width=device-width" />
이미지 크기가 크거나 작을 경우 zooming되는 과정에서 해상도 저하 문제가 일어나는 것으로 보이며, 위의 메타 태그를 적용한 뒤에는 정상적으로 표시되었다.
혹은 아래의 방법으로 이미지의 perspective를 변경함으로써 해결된다는 리포트도 존재한다.
img { -webkit-perspective: 1; }