Firefox 배경 이미지 버그

Question

Firefox가 이상하게 작동합니다. 나는 div 배경 (보통 때처럼)을 위해 간단한 4x4px 투명한 PNG를 사용한다. 크롬, 사파리, 오페라, 심지어 IE에서는 훌륭해 보이지만 FF에서는 깨졌습니다. 제가 이야기하는 것을 보여줄 그림이 있습니다 : http://cl.ly/2Q1l0S1u3I2Z1e3U2n0G.

배경에 이미지와 그라디언트를 사용하지만 이미지 만 사용한 경우에도 동일한 결과가 발생합니다. 난 단지 배경 이미지를 사용

#wrap { 
    background-color: #f5f5f5; 
    background-image: url(../images/general/bg-wrap.png); 
    background-image: url(../images/general/bg-wrap.png), -webkit-gradient(linear, left top, left bottom, from(#f5f5f5), to(#ebebeb)); 
    background-image: url(../images/general/bg-wrap.png), -moz-linear-gradient(top, #f5f5f5, #ebebeb); 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f5f5f5', endColorstr='#ebebeb'); 
    background-position: 0 0; background-repeat: repeat; 
} 

, 그것은 다음과 같이 보았다 : 여기

코드입니다

#wrap { 
    background: #f5f5f5 url(../images/general/bg-wrap) 0 0 repeat; 
} 

그리고 이것은 BG-wrap.png입니다 : http://cl.ly/0i3i1R0P2R0i1K1h1V1P. 나는 이상한

Answer 1

...

내가 바이올린을 설정 ... 무슨 일이 일어나고 있는지 이해하지 않는다, 그것은 다음과 같이 작동합니다 :

http://jsfiddle.net/will/KMVvT/ 당신이 뭔가 할 수 있다고 생각하십니까 그렇지 않으면 간섭합니까?

Answer 2

내가 생각할 수있는 유일한 사실은 몇 년 전, 초기 버전의 Firefox는 배경 이미지가 너무 작아서 (약 16x16 미만) 반복하는 데 어려움이있었습니다.

아마도 이것은 그라디언트 채우기 CSS와 결합했을 때 그 버그의 새로운 화신입니다.?

더 큰 배경 이미지로 테스트하여이를 제외하면됩니다.

Answer 3

닫는 괄호 뒤에 쉼표로 쉼표와 웹킷 기능을 구분하지 마십시오. 또한 이미지 경로는 따옴표 안에 캡슐화되어야합니다.

이미지가 표시되지 않지만 FireBug에서 볼 수있는 문제가있었습니다. 그 이유는 애드 블록 플러스 확장 이었기 때문입니다. 해당 페이지 (또는 일반)를 사용 중지 한 후 다시 표시되었습니다.

Answer 4

누구나 파이어 폭스 버그 및 배경 이미지 타일 치수에 대한 권리가 있습니다. 16p x 16px 타일과 동일한 문제가있었습니다. Nealio의 답변은 정확하지만 해결의 문제는 아닙니다. 오히려 타일을 가져 와서 문자 그대로 복제하여 가로 및 세로로 반복하고 그 타일을 배경 이미지로 사용하십시오.

예를 들어, 내 배경 이미지는 회색과 흰색 사각형이 번갈아 가면서 아주 작은 "바둑판"의 간단한 타일입니다. 첫 번째 이미지는 패턴을 무한히 바둑판 식으로 배열하는 최소 수준 이었기 때문에 각 "체커"는 8px x 8px를 측정하여 16px x 16px의 배경 이미지를 얻었습니다. 어디서나 을 제외하고는 파이어 폭스를 제외하고는 똑같은 지그재그 모양의 재규어가 표시됩니다.

Nealio의 응답을 읽은 후, 나는 첫 번째 패턴 타일을 가져 와서 4 체커 x 4 체커 (8px x 4 = 32)가되도록 두 배가되었습니다.

그리고 voila! 같은 배경 모양이지만 약간 큰 타일.