J'ai un bug de positionnement de background sur IE pour le sol enneigé avec le 2013 sur la gauche qui saute comme de par hasard que sur IE ... y'a t-il des expert IE qui pourrait m'éclaircir.

Voici le lien : http://dev.digikube.fr/agilent-christmastour2013/welcome

Vous pouvez tester sur Safari, Firefox, Google Chrome pour voir le résultat escompté et l’énorme connerie de IE par la suite.

Cordialement,
Flourt.

6 réponses


le design est sympa ^^, tu peux faire un codepen de ton animation ? Histoire de faire quelque test en temps réel ^^

Digikube
Auteur

Merci.

http://codepen.io/anon/pen/mkjfE

Voici ... j'utilise CakePHP donc les images je te propose que les récupérer direct sur le site.

J'ai regardé le code, le problème vient de la ligne 163 de ton fichier css.
en mettant ceci tout simplement, ça passe bien.

background-position: left bottom;

Lorsque l'on analyse avec IE10 en mode de compatibilité IE8, on se rencontre qu'il écrit ceci :

background-position-x : 0%;
background-position-y : 0%;
Digikube
Auteur

Oui car c'est dans l'animation que je fais varier ces valeurs. lorsque je passe mon fond comme ceci :

background-position: left 5px bottom -10px;

Le problème persiste dans l'animation.

Regarde ce lien : https://developer.mozilla.org/fr/docs/CSS/background-position#Compatibilit.C3.A9_des_navigateurs, on peut voir que la syntaxe à 4 valeurs ne fonctionne qu'à partir de IE9.

Digikube
Auteur

Oui c'est ce que je me suis aperçu en faisant quelques recherche j'ai donc opté pour :

background-position: 5px 320px;

(Qui correspond au bon calage depuis left top)
Mais l'anim couille toujours ... j'essaie de reprendre une par une les valeurs dans mon anim ...

PS : IE C'est du bousin !

En fait je sais peut être de quoi ça peut venir ... Je pense que c'est ce bout de code qui ne gère pas la positionactuelle du background non ?

var pos = {x : '', y : ''}
        var that = welcome;
        welcome.animate({
            'background-position-x' : '5px',
            'background-position-y' : '320px'
        },{
           duration : 8000, 
           step : function(a,b){
               if(b.prop == "backgroundPositionX"){
                   pos.x = a + b.unit
               }else if(b.prop == "backgroundPositionY"){
                   pos.y = a + b.unit
               }
           },
           progress : function(){
               that.css('background-position', pos.x + ' ' + pos.y);
           }
        });