Firefox 4: problèmes de CSS bizarres

iDanny

Membre actif
8 Janvier 2009
262
12
Hi les devs !

J'ai récupéré - comme tout le monde - la version finale de FF4 cette semaine, et j'observe un truc bizarre sur le site de cette appli de dév : http://www.kaleidoscopeapp.com/

Ouvrez-le avec Safari ou même FF 3.6 pour comparer...

Sur mon FF4, je ne vois pas la texture en background sur la 1ère page... pourtant Firebug m'indique qu'elle est bien chargée !

Idem au-dessus de la page "IMAGE SCOPE": il manque l'image de background "spikes-bottom.png" (Firebug ne liste pas la propriété background de la classe concernée, alors qu'on la voit bien dans Safari 5 !)

Ca le fait aussi chez vous ? :rateau:
 
Hello,

j'ai eu ce type de problème sur un site : en fait j'avais en footer une image qui s'affichait correctement sur tous les navigateurs excepté firefox 4 beta, pour entrer dans le détail l'image du footer était définie dans mon css en tant que background-image. J'avais également inséré un petit javascript permettant d'afficher le footer toujours en bas de page, et ce suivant la hauteur de la page (en gros si ma page est plus petite que l'écran, le footer s'affiche en bas de page, si ma page est plus grande que la hauteur de l'écran, mon footer s'affiche en bas de page et est donc visible grâce au scroll). Par ailleurs j'avais défini le display de mon footer sur display-block. Et du coup en le passant sur inherit cela m'a permis de régler le problème. Donc je pencherai peut-être pour ce type de solution, à tester.

A plus ;),
 
Oui m'enfin c'est pas moi qui fais le site, j'ai juste constaté que ça passe pas sous FF4 et je trouve ça bizarre :p

Qqun a pu tester ce que j'ai constaté dans le 1er post, sur un FF4 ? :)
 
C'est juste un "style" lié à webkit (le moteur de Safari) :
Bloc de code:
background-image: -webkit-gradient(radial, 50% 40%, 700, 50% 40%, 0, from(rgba(0, 0, 0, 0.898438)), to(transparent));

Ce qui explique que FF4 ne le comprenne pas car lui exploite son propre moteur et ses "styles perso" commencent par -moz

Il induit un dégradé du plus foncé à l'extérieur vers le centre qui sera transparent et laissera apparaître l'image de fond.

FF4 ne fait que recouvrir sans gérer la transparence au centre.

Chrome est basé sur webkit lui aussi et interprète bien ce style qui n'est pas conforme à la norme.
 
Ce dégradé s'applique à la div "gradient" qui est au-dessus.

Si elle est interprétée correctement, l'image répétée dans la div "top" est plus ou moins masquée par le dégradée.

Ce qui est par contre étrange c'est que le dégradé transparent défini pour webkit l'est aussi pour FF

Bloc de code:
background-image:-moz-radial-gradient(rgba(0, 0, 0, 0), #111);

Mais cette portion n'est pas prise en compte par FF4 mais apparait et l'inspecteur de Chrome comme générant un avertissement (mais rien dans l'inspecteur de Safari).

Bref, il y a des trucs à finir dans cette version 4 de Firefox.

Pour la petite histoire la beta sur windows avait du mal avec la propriété float...