CSS transition flickering in Firefox

Question

I have 3 elements that is growing on :hover using a CSS transition. Two of them work just fine, but the last one is flickering in Firefox, but works in Chrome and IE. So the problem is only there in Firefox.

CSS:

.contact{
    width: 300px;
    height: 250px;
    margin: 10px;
    margin-top: 37px;
    float: right;
    background-color: #eca83b;
    border-radius: 10%;
    transition: 0.5s;
}

.contact:hover{
    width: 320px;
    margin: 0px;
    margin-top: 27px;
    height: 260px;
}

HTML:

<section class="contact">
   <svg> 
   </svg>
   <h2 class="item">Contact</h2>
</section>

What can cause this problem?

Answer 1

I had exact same issue: on several sites I've built that use CSS transform scale, there's a flicker the first time you hover over the images. Afterwards they're fine. Doesnt happen on any other browser, and is only recent - obviously a bug in later versions of FF.

Anyway, just fixed it by, of all things, altering the greyscale filter. Try this CSS on your img:

filter: grayscale(1%);

It makes no noticable difference to the colour, but the flicker is gone!

Answer 2

backface-visibility: hidden tends to fix a lot of flickering issues, try giving it a shot.

Answer 3

Try putting:

will-change: transform;

Into your .contact

this will pre-render your object into 3d so it should not flicker.

Sometimes it also helps to put it into your class's children, like if you have .contact > .img or something.