11540 sujets

JavaScript, DOM et API Web HTML5

JQuery vs CSS3

Bonjour à tous !

Je n'ai pas vraiment su comment classer ce sujet car le problème est un peu... inattendu.

J'ai voulu créer des vignettes rondes qui grossisse avec jQuery au passage de la sourie. Le soucis, c'est que sur Chrome, le border-radius s'annule au déclenchement de l’événement, ce qui transforme mes bulles en carrés. Le problème ne se retrouve pas sur Firefox ou IE (c'est pour vous dire).

Avez vous une idée ?

Voici le lien : new.adrian-vaucoret.com

Merci d'avance
Sous opera, le border-radius n'est pas là du tout... et le grossissement est très limité (genre 5 px de tous les cotés)
Modifié par Lothindil (05 Apr 2013 - 09:49)
Ouch, en effet. C'est pire que ce que je croyais. Pourtant, je viens de vérifier, ma règle css est pourtant bonne. C'est à n'y rien comprendre. Merci pour la remarque.
Bonjour.

Je ne sais pas si ça peut t'être d'une quelconque utilité, mais tu peux définir ton border-radius en pourcentages (border-radius: 50%). De cette façon, tu auras toujours des ronds quelles que soient leurs variations de taille. Peut-être qu'avec cela, tu pourrais te passer de jQuery ?

Bonne continuation.
Pourquoi jquery ? Voici deux possibilités en CSS:
/* Première option */
.round {
   background:url('http://new.adrian-vaucoret.com/img/test/wallpaper-2247166%20(Copier).jpg') center center;
   background-size:auto 125%;
   width:100px;
   height:100px;
   margin:25px;
   border-radius:1000px;
   -webkit-transform:scale(1);
   -moz-transform:scale(1);
   -ms-transform:scale(1);
   -o-transform:scale(1);
   transform:scale(1);
   -webkit-transition:0.2s;
   -moz-transition:0.2s;
   -ms-transition:0.2s;
   -o-transition:0.2s;
   transition:0.2s;
}

.round:hover {
   background-size:auto 100%;
   -webkit-transform:scale(1.5);
   -moz-transform:scale(1.5);
   -ms-transform:scale(1.5);
   -o-transform:scale(1.5);
   transform:scale(1.5);
}
/* Fin première option */

/* Seconde option */
.round {
   background:url('http://new.adrian-vaucoret.com/img/test/wallpaper-2247166%20(Copier).jpg') center center;
   width:100px;
   height:100px;
   margin:25px;
   border-radius:1000px;
   -webkit-transition:0.2s;
   -moz-transition:0.2s;
   -ms-transition:0.2s;
   -o-transition:0.2s;
   transition:0.2s;
}

.round:hover {
   width:150px;
   height:150px;
   margin:0;
}
/* Fin seconde option */

/* Style du tableau */
table {
   width:750px;
   height:750px;
}

table td {
   width:150px;
   height:150px;
}
/* Fin style du tableau */
<table>
   <tbody>
      <tr>
         <td><div class="round"></div></td>
         <td><div class="round"></div></td>
         <td><div class="round"></div></td>
         <td><div class="round"></div></td>
         <td><div class="round"></div></td>
      </tr>
      <tr>
         <td><div class="round"></div></td>
         <td><div class="round"></div></td>
         <td><div class="round"></div></td>
         <td><div class="round"></div></td>
         <td><div class="round"></div></td>
      </tr>
      <tr>
         <td><div class="round"></div></td>
         <td><div class="round"></div></td>
         <td><div class="round"></div></td>
         <td><div class="round"></div></td>
         <td><div class="round"></div></td>
      </tr>
      <tr>
         <td><div class="round"></div></td>
         <td><div class="round"></div></td>
         <td><div class="round"></div></td>
         <td><div class="round"></div></td>
         <td><div class="round"></div></td>
      </tr>
      <tr>
         <td><div class="round"></div></td>
         <td><div class="round"></div></td>
         <td><div class="round"></div></td>
         <td><div class="round"></div></td>
         <td><div class="round"></div></td>
      </tr>
   </tbody>
</table>

Les deux options sont assez similaire, au détail près que la seconde fournira quelque-chose d'un peu plus saccadé que la première (c'est à peine perceptible).
Modifié par juliendargelos (05 Apr 2013 - 11:30)
... Je déteste m'apercevoir que mon raisonnement est complètement stupide. En effet, jquery est complètement inutile.

Merci beaucoup pour cet éclairage des plus précieux.
De rien !
Ton raisonnement aurait était totalement pertinent il y a quelques temps Smiley cligne
Note toutefois que mon alternative ne marchera que sur Internet Explorer 10 (corrigez-moi si je me trompe mais je ne crois pas que IE9 prenne en charge les transformations et transitions). Après bien sûr, aucun problème sous FF, Opera, Safari, et Google Chrome (du moment qu'ils sont à jour).
Modifié par juliendargelos (05 Apr 2013 - 12:25)
Sujet clos
Aller à