043 - iOS에서 body에 Full-size background-image 적용

새로운 html, css 작성 중에 Full-size background를 적용하는 과정에서 문제점에 봉착했다.

윈10 각종 브라우저와 갤럭시탭 등을 테스트해본 결과 별다른 이상 없이 잘 작동하는데, iOS에서만 background-size: cover; 을 적용할 시 본문 길이에 따라서 height가 엄청나게 길어졌다가 줄어졌다가 했다.

자바스크립트를 이용해서 clientHeight / window.innerHeight / window.outerHeight / window.screen.Height / scroll.Height 등등 height 값을 변경할 수 있는 온갖 시도를 다 해보았지만 소용이 없었다.

 

왼쪽 사진은 Height가 본문 길이만큼 길어져서 cover을 적용할 시 매우 확대되는 모습이다.

 

사진을 보면 알겠지만 오른쪽처럼 나와야 하는데, iOS만 왼쪽과 같이 몇 배 이상 확대되어 출력된다...

해결도 못하고 삽질만 하고 있던 와중, 나와 비슷한 문제를 겪던 사람이 쓴 글에 어느 양키 성님이 작성한 댓글을 발견하게 된다.

 

 

https://stackoverflow.com/questions/24154666/background-size-cover-not-working-on-ios

 

내용을 보면 알겠지만, 그렇다. iOS는 지 혼자 찐따마냥 viewport의 height가 아닌, document의 height를 사용하는 것이었다.

viewport란 출력이 되고 있는 화면의 크기를 말하는데, 이게 document의 height로 적용되면 글 길이가 세로로 3000px이면 background의 height도 3000px가 되어버린다는 것이다. 물론 width 역시 height: 3000px; 값에 따라서 커지게 된다. 적용시킨 이미지의 해상도가 1400x1000이니, width는 4200px이 되는 셈이다. 야발...

 

그리고 양키 성님의 말씀에 따르면 해결법은 매우 간단했다. body가 아니라 body:after에 이미지를 주고 height를 100vh, background-size는 cover로 주면 된다고...

 

body:after {
	content:"";
	position:fixed; /* stretch a fixed position to the whole screen */
	top:0;
	height:100vh; /* fix for mobile browser address bar appearing disappearing */
	left:0;
	right:0;
	z-index:-1; /* needed to keep in the background */
	background: url(이미지.jpg) center top;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}

 

이렇게 하면 된다고 하신다.

실제로 적용해보았더니 iOS에서도 잘 작동한다.

 

감사합니다. 정말 감사합니다, 양키 성님.