Weird CSS3 Transition (flickering)

Question

When I hover unto my button, it gives a white flash first when starting the transition. Why does it sort of flickers when I apply a css3 transition to my button? My brow

Answer 1

I think the issue is that you are switching from a linear-gradient background to a solid background color for Google Chrome and Microsoft Edge web browsers. To fix this issue you would add a similar linear-gradient background to your pseudo classes, in this case the :hover and the :active. I tried it myself on your jsfiddle and I had no flashing in the rendering while hovering over the button.

        background: -webkit-linear-gradient(top,  #ff3019 0%,#cf0404 100%);
        background: -o-linear-gradient(top,  #ff3019 0%,#cf0404 100%);
        background: -ms-linear-gradient(top,  #ff3019 0%,#cf0404 100%);
        background: linear-gradient(top,  #ff3019 0%,#cf0404 100%);

I changed the top color of the linear-gradient to give a noticeable change to the hover effect.

 button:hover {
background: -webkit-linear-gradient(top,  #ff5e4c 0%,#cf0404 100%);
        background: -o-linear-gradient(top,  #ff5e4c 0%,#cf0404 100%);
        background: -ms-linear-gradient(top,  #ff5e4c 0%,#cf0404 100%);
        background: linear-gradient(top,  #ff5e4c 0%,#cf0404 100%);
   }

There are no more issues with flashing when I hover over the button in Chrome or Microsoft Edge. I hope this helps.