CSS - transition frontière Glitchy

Question

Fiddle:

https://jsfiddle.net/9poh0y28/1/

button.products:hover { 
    background-color: #fff; 
    color: #303030; 
    cursor: pointer; 
    border: 4px solid #0085ca; 
} 

Pour une raison quelconque dans Chrome il y a ce saut bizarre quand la frontière est ajouté. Il est ajouté, puis devient légèrement plus gros une fraction de seconde après. Aucun moyen de réparer cela?

Answer 1

Changer votre transitionsall-background-color:

-webkit-transition: background-color 0.5s ease; 
transition: background-color 0.5s ease; 

Lorsque vous utilisez all, toutes vos propriétés obtenir les transitions. Donc, votre frontière va de 1px à 4px, donc l'effet étrange.

Here's your fiddle a changé