구글 크롬에서 블로그(blogger) 레이아웃이 깨지는 버그

크롬과 블로그(blogger) 관련하여 구글에 의견을 보내기 위한 글입니다. '의견보내기'로는 설명하기 힘든 부분이 있어서 블로그 포스트로 작성합니다.



블로그에 글을 쓸 때 이미지를 삽입하면, 발행된 글을 읽는 사람(reader)은 글에 삽입된 이미지를 클릭하여 확대된 이미지로 볼 수 있습니다.

공식 유튜브 파트너 및 제작자 블로그를 예로 들어보겠습니다. 아래는 공식 유튜브 파트너 및 제작자 블로그의 "YouTube 라이브 스트리밍 채널 확대" 라는 글을 크롬 브라우저로 본 화면인데요.

그림처럼 포스트에 이미지가 있을 때 읽는 사람(reader)은 이미지를 클릭하면, 확대된 이미지로 볼 수 있습니다. 이미지를 클릭하면, 아래 그림과 같은 화면이 나옵니다.

검은 바탕화면의 이미지 확대 화면. 이는 blogger에서 기본으로 제공되는 기능입니다. 여기서 우측 상단의 'X'를 클릭하거나, 검은 바탕화면을 클릭하면 본래의 화면으로 돌아갑니다.

그런데, 크롬 브라우저에서 이 기능을 이용하면, 버그가 생깁니다.

이미지 확대화면에서 우측 상단의 'X'를 클릭하거나, 검은 바탕화면을 클릭하여 본래의 화면으로 돌아온 후 '스크롤 올리기', '스크롤 내리기', '이미지에 마우스 커서 올리기' 등의 동작을 하면, 블로그의 일부 영역이 약 8px 가량 좌측으로 이동하고 그 잔상이 남습니다.

템플릿을 꾸미다가 이런 현상이 생긴다는 것을 알았기 때문에, 처음에는 코드가 꼬여서 생기는 문제인줄 알았습니다. 그런데, 이 같은 현상은 익스플로러와 파이어폭스 브라우저에서는 발생하지 않았습니다. 또, 그림에서 보시는 바와 같이 제 개인 블로그에서만 발생하는 문제도 아니었습니다.

위의 사진은 구글 한국 개발자 블로그의 글 번개장터 YouTube API 적용기 에서 동일한 문제가 발생한 것을 캡쳐한 것입니다.

제가 프로그래밍은 잘 모릅니다만, 문제의 원인에 대해서 짐작이 가는 부분이 하나 있는데요. 검은 바탕의 이미지 확대화면이 뜰 때, 검은 바탕을 유심히 보면 블로그가 우측으로 약 8px 정도 이동하는 것을 볼 수 있습니다. 아마 이 부분에서 무슨 문제가 발생하는 것이 아닐까 싶습니다.

여튼, 해당 문제에 대해 구글 측에 의견을 전달합니다.