Feed on
Posts
Comments

플래시를 페이지에 보여주기 위해 javascript를 이용하거나 object나 embed태그를 이용해서 표현을 한다.
그러나 z-index 때문에 혹은 다른 개발 사정으로 인해 iframe을 이용해서 표현 할 경우가 있는데 이럴때 firefox3에서는 일부 경우에 따라 플래시 좌측 1px을 표현하지 못하는 버그가 발생한다.
이 버그의 공통된 원인은 플래시를 감싸는 박스가 margin:0 auto;의 속성으로 가운데 정렬이 된 경우 발생하며, 박스의 width 값이 홀 수이거나 짝수 일 경우 발생하게 된다.
여기서 width값이 홀 수 이거나 짝수일 경우라는 것은 브라우저의 세로 스크롤 때문이다.(어쩌면 브라우저의 가로사이즈가 홀수이냐 짝수이냐의 문제일 수도 있다.)
감싸는 박스란 플래시에서 바깥의 어떤 박스든 플래시가 포함되어 있다면 어느 박스이던지 해당되며, 플래시와 가장 가까운 박스가 플래시에게 최종적인 영향을 가할 수 있다.
말이 어렵다면 그림으로 다시 확인 해 보자.
플래시 박스 예제1

위 그림을 보면 D를 제외한 A,B,C,F 박스에 어떤 박스이던지 margin:0 auto; 속성이 들어갈 경우 발생하게 된다.
문제는 박스의 가로 사이즈가 홀수, 짝수 모두 발생할 수 있기 때문인데 스크롤이 항상 있는 경우라면 가로 사이즈는 홀 수로 설정되어야 하고 스크롤이 항상 없는 경우라면 짝수로 설정되어도 된다.
하지만 이럴 경우는 거의 없다. 그리고 window XP의 테마가 고전이냐 XP테마 이냐에 따라서도 홀수, 짝수 기준이 달라지고 브라우저의 전체 가로사이즈가 홀수 이냐 짝수 이냐에 따라서도 달라지게 된다.

이 문제를 해결하기 위해서 현재까지 해결 방법으로는 플래시의 wmode를 window로 설정하는 것이 유일한 대안이지만 wmode의 window는 기본값이고 성능이 가장 좋다고는 하지만 플래시위에 레이어를 띄울 수도 없고, 아래쪽의 배경이나 요소가 보여지지도 않기 때문에 상황에 따라서는 해결방법으로 적합하지 않을 수 도 있다.

지금까지 왠만한 가운데 정렬되는 사이트에서 사용중인 iframe을 이용한 플래시가 눈으로 봤을 때 1px이 보이지 않는 불편함이 느껴지지 않았다고 생각되어, 특별한 경우가 아니라면 수정하지 않아도 문제는 없겠지만 분명한 것은 Firefox3 브라우저의 버그이기 때문에 이후 버전에서나 현재 버전 업데이트를 통해 수정 되었으면 하는 바람이다.

정말 오랜만에 블로그에 글을 적어 보는 것 같다
입사한 뒤로 블로그를 너무 멀리 했던지 온라인상으로 알고 지내던 분들과도 점점 멀어지는 기분도 들고.. 입사한지 1년이 가까워지는 지금에서야 다시 블로그에 글을 쓰니 그동안 참 너무 무신경했다는 생각도 든다
(사실은 글을 간간히 적었는데 모두 Publish 하지 못하고 Draft해 놓고 있어 어떻게 처리해야할지 난감한…-_-)

요즘 IE8에 대한 Beta1 테스트 때문에 Firefox3 에 대해서는 전혀 모르고 있었는데
몇일전 Firefox3 Download 소식을 듣고서야 알게 됐다.
외견상의 변화와 보다 편리한 사용성을 위한 기능들 그리고 보안강화 등은 일반 사용자들이 느끼는 부분이고,
웹 개발자나 확장 기능 개발자들이 에게는 많은 벡엔드 기능을 추가 되었다고 한다.
나야 웹표준과 접근성에 관심이 있다보니 기술적인 부분보다는 달라지는 렌더링과 css개선과 확장여부 등이 더 궁금했었다.
(자세한 Firefox 3에 추가된 새로운 기능은 Mozilla Developer Center 를 참고하면 된다)

Firefox3는 Firefox2 보다 향상된 표준에 가까운 HTML 렌더링을 한다고 한다.
Acid2 Test를 봐도 알겠지만 Firefox2는 통과하지 못한다는 것을 알 수있고 Firefox3는 통과 한다고 하지 않았나..
무엇이 달라졌는지 모든 부분에 테스트를 해봐야 겠지만 우선 Form 컨트롤러들의 레이아웃 렌더링에 차이가 발생하는 것을 발견했다.
(이미지 사이즈를 보지말고 숫자를 보도록 하자.. 캡쳐를 잘못해서 사이즈가 다르다..-_-)

Firefox 3 Firefox 2

<input type=”text”>

Firefox3 inputtext boxmodel

<input type=”text”>

Firefox2 inputtext boxmodel

<input type=”radio”>

Firefox3 radio boxmodel

<input type=”radio”>

Firefox2 radio boxmodel

<input type=”checkbox”>

Firefox3 checkbox boxmodel

<input type=”checkbox”>

Firefox2 checkbox boxmodel

<textarea cols=”20″ rows=”3″>

Firefox3 textarea boxmodel

<textarea cols=”20″ rows=”3″>

Firefox2 textarea boxmodel

<select>

Firefox3 select boxmodel

<select>

Firefox2 select boxmodel

<option>

Firefox3 option boxmodel

<option>

Firefox2 option boxmodel

위 표를 보면 모두 조금씩 크기 차이가 발생했는데 특히나 checkbox, radio, select 는 기본으로 차지하는 사이즈가 달라지니 미리 대비를 해야 할 것 같고 textarea의 경우 예제에 cols, rows 속성값이 나와있지만 cols, rows 선언값에 대한 width, height 값이 차이가 났었다.

위 문제중 checkbox, radio와 텍스트를 함께 사용한 예를 보면
일단 <input type=”checkbox”>, <input type=”radio”> 는 4px의 차이가 나는데(border의 차이를 빼면 2px 차이가 난다)
아래 예 처럼 텍스트와 함께 쓰일 경우 Firefox2와 달리 차이가 발생하게 된다.

Firefox 3 Firefox 2
Firefox3 ex Firefox2 ex

위와 같은 현상을 막기 위해서는 input에 vertical-align 을 지정해주면 해결 되지만 vertical-align을 줄 수 없을 상황이 올 수도 있으니 변경되는 상황에 대해 잘 파악하고 대비해야겠다.
그리고 select 의 높이 차이와 textarea 의 cols, rows 차이는 각각 width, height 값을 선언해주면 해결되므로 미리 알고 있도록 하자

Firefox3가 표준렌더링에 더 완벽하게 마춰졌기 때문에 기존 Firefox2 에서 제대로 보였던 페이지라 할 지라도 제대로 보이지 않을 수도 있다.
이건 내 생각이지만 올바른 css 코드와 마크업으로 작성했다면 큰 문제는 없지 않을까 생각한다.