블로그 꾸미기를 하다 보면 여러가지 문제들을 직면하게 된다. 현재 이 블로그에는 여러가지 에러들이 존재한다. 간단하게 해결되는 것들도 있긴 하지만 해결이 불가능한것들도 있고 어려운 것들도 있고 내가 아직 발견하지 못한 것들도 있다.

지금까지 알고 있으면서도 방치한 오류들 조차도 많다.

특히 익스플로러 사용환경에서는 여러가지 문제점들이 존재한다. 내가 익스플로러가 설치된 컴퓨터가 없어 그동안 확인하지 못하기도 했다.

익스플로러를 제외한 사파리, 크롬, 파이어폭스 브라우저는 특별히 문제가 될만한 것은 없어 보인다. (파이어폭스는 span 태그의 줄 넘김 버그만 해결하면 된다. 간단히 해결되는 거라 문제라 할것도 없다.)

하지만 익스플로러는 버그가 다양하고 심각하다.



1애니메이션 효과시 화면 떨림

이 블로그에는 여러곳에 애니메이션이 포함되어 있다. 첫페이지에서 부터 화면 이곳 저곳... 멈춰있는 정적인 화면을 별로 좋아하지 않는다. 블로그도 살아 숨쉬는 느낌이 드는게 좋다.

애니메이션 효과들의 경우 마이크로 소프트의 익스플로러에서만 화면 떨림이 발생한다. 사용자가 점점 줄어드는 익스플로러를 위해 애니메이션을 모두 삭제할 수는 없다. 그래서 익스플로러에서만 애니메이션이 작동하지 않도록 효과를 삭제했다. 애니메이션을 삭제하니 화면 떨림은 사라졌다. 하지만 더 이상 화면이 움직이지 않는다.

사파리나 크롬 등 다른 브라우저는 전과 동일하게 애니메이션이 작동한다.

2스크롤시 고정메뉴들의 떨림

블로그에는 위치가 고정되어 있는 부분들이 존재한다. 상단에 로고와 블로그 이름 설정 검색등이 위치한 상단바와 오른쪽 카테고리와 최신 글 최신 댓글이 포함된 사이드바가 화면에 고정되어 있다. position fixed 로 고정된 부분들은 화면을 스크롤시 고정되어 있지 않고 스크롤 동시에 움직인다. 익스플로러를 제외한 다른 브라우저는 화면에 그대로 고정되어 있지만 익스플로러에서만 덜덜덜 거리는 증상이 발생한다.

이 현상은 항상 존재하는 것 같지는 않다. 같은 설정이더라도 어떤 경우에는 떨림이 발생하지 않기도 한다. 무슨 차이인지 나도 알 수 없다.

인터넷에 검색해보니 이미 여러사람들이 같은 문제를 겪고 있다.

웹관련 커뮤니티에서는 다양한 해결방법들을 제시하고 있었다. 그 방법들을 하나씩 시도해 보았으나 이 블로그에서는 해결되지 않고 계속 그 문제가 발생하였다. 시도 했던 방법들 중 HTML 과 BODY 의 CSS에 overflow 를 추가하는 설정법을 통하여 떨림은 해결하였다.

하지만 이게 끝이 아니다. 이 문제는 해결되었지만 다른 문제가 새로 발생하였다.

익스플로러는 이제 제대로 보여지지만 모바일 환경의 iOS 사파리에서 스크롤링 가속효과가 작동하지 않는다.

이에 대한 여러가지 해결 방법(-webkit-overflow-scrolling:touch)도 제시되어 있지만 시도해보니 또 다른 더 큰 문제가 발생된다. 문제 하나 해결하면 다른 문제가 생기고...

애플 모바일 사파리에서의 스크롤링 가속 효과는 일단 포기하기로 했다. 익스플로러를 위해..

마음 같아서는 익스플로러는 모두 포기하고 싶지만 아직까지는 익스플로러의 사용자 수가 무시할 수 없는 수준이라 당분간은 이대로 유지하려고 한다.

차후 익스플로러 사용자가 현저히 줄어들게 되면 익스플로러는 포기하게 될 것이다.

이제 제발 익스플로러는 좋은 곳으로 보내주고 놓아주길;;;

미디어 쿼리를 이용해 스크롤시 떨리는 문제와 사파리 스크롤링 가속효과는 일단 해결했다.

스킨을 새로 만들었다. 기존에 발생하던 모든 문제들이 해소되었다. 당연한건가 ㅎㅎ