CSS transition flickering in Firefox

问题

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?

回答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!

回答2:

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

回答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.

回答4:

Add -moz-transition: for Firefox i have update in code here give this a try it should work

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

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

来源：https://stackoverflow.com/questions/30411909/css-transition-flickering-in-firefox

标签

html

css3

firefox

css-transitions