[fancyBox2] 모바일 문제 해결하기 – 위치가 이상해지는 것

2012년 6월 19일

이 해결책은 팬시박스1에 대한 해결책은 아니다. 그러나 1에도 적용할 수 있을지 모르겠다. 난 안 해 봤으니 모르겠고. (팬시박스2의 주요 변경사항)

그런데 팬시박스2에서도 모바일 화면에서 문제가 생긴다. 아이폰에서 화면을 확대하면 팬시박스로 떠 있는 놈이 화면 밖으로 튀어나가 버리는 문제다.

CSS의 fixed 프로퍼티 때문에 발생하는 문제인데, 확대했을 때의 top, left 픽셀이 비율에 맞게 함께 조정되면서 생기는 문제인 것 같다. (무슨 말인지 모르겠으면 문제 진단은 패스하고.)

해결책은 의외로 간단하다. 스타일에 다음을 추가해 준다.

.fancybox-wrap{
	position: absolute !important;
}

그러면 아래처럼 깔끔하게 볼 수 있다.

카테고리 글 목록 👉

15년차 풀스택 웹 개발자 안형우입니다

웹 개발에서도 중요한 것은 개념입니다.
이 블로그에는 제가 개발하며 익힌 개념들을 정리합니다.

워드프레스를 개발자 입장에서 다루는 데 오랜 시간을 써 왔습니다.
인프런 강의 “워드프레스 제대로 개발하기 어드민 편, 클라이언트 편” 지식 공유자입니다.

OOCSS에서 Utility-First CSS까지, CSS를 효과적으로 관리하는 데 관심이 많았습니다.
“프로젝트 중심 실전 CSS”라는 제목으로 관련 강의를 유튜브에 연재중입니다.

형우의 웹개발