Firefox 에서 CSS 가 적용되기 전에 HTML 이 먼저 표시되는 문제

마지막 업데이트 4년 전

이 글은 시리즈 ‘연재글 테스트’ 의 1 번째 포스팅입니다. 시리즈 더보기

Firefox 에서만 발생하는 현상으로, 웹 페이지를 열 때 CSS 의 로딩이 지연되는것 처럼 CSS 가 적용되지 않은 상태로 페이지가 잠깐 깜박이며 표시된다. 결국 마지막으로 CSS 가 적용되긴 하지만, 마치 깨진 웹페이지처럼 보여지는 버그가있다.

증상

아래와 같이 Firefox 에서 CSS 적용이 되고나서 페이지가 표시되지 않고 깜박인 다음 적용되는 현상. (CSS 렌더링이 늦어지는 버그?)

CSS 가 렌더링된 수 표시되어야할 페이지가 아주 잠깐이지만 CSS 가 적용되지 않은 상태로 HTML 이 먼저 로딩이 되면서 디자인이 깨진 상태가 잠깐 표시된 후 CSS 가 적용된다.

완성도 높은 페이지를 제작하기 위하여 얼마나 많은 노력을 기울이는데 크롬(Chrome)으로 개발하다가 혹시나 하는 생각으로 파이어폭스(Firefox)로 테스트를 했다가 이런 버그를 만나 퇴근하지 못하는 상황이 발생하면 곤란하기 짝이 없다. 내가 발견했다면 후임들은 먼저 집에 보내자. 이런것 쯤이야 하고 간단하게 해결해 주자. 😱~~

아직까지 정확한 해결 방법을 찾지는 못했지만, 어쨌든 이 버그(?)는 다음의 코드 한 줄로 간단하게 해결할 수 있다.

<html>
    <head>
        ...
        <!-- Firefox CSS 지연렌더링 패치 코드 -->
        <script type="text/javascript"></script>
    </head>
    <body>
        ...
    </body>
</html>

이렇게 <head> ~ </head> 의 마지막줄에, 빈 자바스크립트 코드블럭 <script type="text/javascript"></script> 을 추가하고 하면 다음과 같이 기대하는 대로 표시된다.

이제 얼른 집에 가자…

(이 글을 쓰기까지 꽤 시간이 지나 Firefox 도 업데이트가 많이 이루어졌는데도 불구하고 아직 그대로인 것을 보면 버그가 아닐지도…)

wC8vp48IGo.gif#style=height:25px;vertical-align:text-bottom; … 😇

Richard C. @richard

Hi, my name is Richard. I’m a developer wants to make the world better with logic power. Mainly I use Linux, Nginx, MySQL, PHP and JavaScript . I want to share my knowledge with someone that it was also based from some great persons via LYNMP. 👨‍💻