Timothy Fisher Timothy Fisher - 6 months ago 21
HTML Question

CSS - Glitchy border transition

Fiddle:

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

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


For some reason in Chrome there is this weird jump when the border is added. It gets added, and then gets slightly bigger a split second afterwards. Any way to fix this?

Answer

Change your transitions from all to background-color:

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

When you use all, all of your properties get the transitions. So your border goes from 1px to 4px, thus the weird effect.

Here's your fiddle changed

Comments