Bug de l'image d'arrière-plan de Firefox

Question

Mon Firefox se comporte bizarrement. J'utilise un simple PNG transparent de 4x4px pour l'arrière-plan d'un div (comme d'habitude). Dans Chrome, Safari, Opera et même IE, tout est parfait, mais dans FF, c'est "cassé". Voici une image pour vous montrer ce dont je parle : http://cl.ly/2Q1l0S1u3I2Z1e3U2n0G .

J'utilise une image et un dégradé pour l'arrière-plan, mais si je n'utilise que l'image, le résultat est le même.

Voici le code :

#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;
}

Lorsque j'ai utilisé uniquement l'image d'arrière-plan, cela ressemblait à ceci :

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

Et voici le bg-wrap.png : http://cl.ly/0i3i1R0P2R0i1K1h1V1P . Je ne comprends pas ce qui se passe...

Answer 1

Tout le monde a raison à propos du bug de Firefox et des dimensions des tuiles de l'image de fond -- j'avais le même problème avec une tuile de 16p x 16px. La réponse de Nealio semble être correcte, mais ce n'est pas une question de résolution. Il faut plutôt prendre votre tuile et la dupliquer littéralement pour qu'elle se répète horizontalement et verticalement, puis utiliser cette tuile comme image de fond.

Par exemple, mon image de fond est une simple tuile d'un très petit "damier" avec des carrés gris et blancs alternés. La première image était le strict minimum pour carreler le motif à l'infini, de sorte que chaque "damier" mesurait 8px x 8px, ce qui donne une image de fond de 16px x 16px. Cela semble correct partout sauf Firefox, où il affiche le même rendu zig zaggy jaggy que le vôtre.

Après avoir lu la réponse de Nealio, j'ai pris la première tuile du motif et je l'ai doublée pour qu'elle fasse 4 pions x 4 pions (8px X 4 = 32).

Et voilà ! Même aspect du fond, mais une tuile légèrement plus grande.

Answer 2

La seule chose à laquelle je pense est qu'il y a quelques années, les premières versions de Firefox avaient des difficultés à répéter les images d'arrière-plan trop petites (moins de 16x16 environ).

Peut-être s'agit-il d'une nouvelle incarnation de ce bug lorsqu'il est combiné à un css de remplissage en dégradé ?

Vérifiez que ce n'est pas le cas en le testant avec une image de fond plus grande.

Answer 3

C'est bizarre...

J'ai mis en place un bidule, et ça fonctionne bien comme ça : http://jsfiddle.net/will/KMVvT/

Pensez-vous que quelque chose d'autre pourrait interférer ?

Answer 4

Vous ne devez pas séparer les fonctionnalités mozilla et webkit avec une virgule après le crochet fermant. De même, le chemin de l'image doit être encapsulé entre guillemets.

J'ai eu le problème suivant : l'image ne s'affichait pas, mais pouvait être visualisée avec FireBug. La raison en était l'extension adblock plus. Après l'avoir désactivée pour cette page (ou en général), elle s'est affichée à nouveau.