티스토리 뷰


예전부터 계속 신경쓰였던 일이 있는데 제 블로그는 #1 반응형 스킨을 제 입맛대로 고쳐가면서 사용하고 있습니다. 헌데 모바일에서 일부 포스팅이 계속 화면에 스크롤이 생기는 증상이 발생했습니다. 

 

보이시나요? 이렇게 스크롤이 발생하는게? 

 

하지만 모바일 화면으로 봤을 때는 화면 전체를 꼼꼼히 스크롤을 해봐도 벗어난 이미지나 글, 영역이 보이지 않았습니다. 스크롤이 생길만한 이유가 전혀 없었던 것입니다. 

 

그래서 날 잡고 한번 개발자 도구로 한번 까보자 까보자 마음만 먹고 있다가 오늘... 그 결전의 날이 왔고 저는 개발자 도구를 이용해서 다시 자세히 살펴보기 시작했습니다. 

 

그런데 왠걸? 화면 끝에 이상한 녀석이 보이는 겁니다. 모바일 화면으로는 보이지 않던 그녀석이 크롬 개발자 도구의 모바일 화면 모드에서 보였던 겁니다. 

 

 

 

 

아니...? 누구냐 넌?!

 

이놈을 검색해보니 크롬의 구글 번역 기능 때문에 생긴다는 외신....이 아닌 구글신님의 간증이 있었습니다. 아니, 아이콘도 딱 구글 번역 아이콘이잖아요.

 

저 쓸모없는 아이콘이 내 모바일 화면에 흠집을 만들다니... 용서 할수 없다는 마음으로 살포시 없애드렸고, 같은 글에서 다시는 스크롤이 발생하지 않았다는 후문이 전해집니다. 

 

제가 스킨 편집에서 추가한 CSS 코드는 아래와 같습니다. 

#gtx-trans{display:none;}

 

크롬류, 즉 크로미엄 엔진을 사용하는 브라우저에서는 공통된 증상을 보이는 듯 하며 구글 크롬 번역 아이콘 모바일 브라우저에서 제한된 영역을 자기 혼자 강제로 넓히는 만행을 저지르고 있었습니다.

 

개발자 도구로 센타를 깐 모습은 아래와 같습니다. 

 

허... "gtx-trans" 라는 놈이 감히 absolute 속성에 left 773px를 먹고 있다니 제정신이 아니렷다.. 

 

'display:none' 을 드려서 재웠습니다. 오늘의 모바일 이상 스크롤 발생 문제는 이렇게 해결되었습니다. 감사합니다. 


댓글
최근에 올라온 글
최근에 달린 댓글