CODEWITHSUNDEEP
htmlcssfirefoxcss-transitions
Morten Saabye Kristensen
Morten Saabye Kristensen

Reputation: 133

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?

Upvotes: 10

Views: 7758

Answers (5)

Yasen Slavov
Yasen Slavov

Reputation: 787

None of these worked for me, however I worked around the issue by setting visibility:hidden; position: absolute; on the inactive images and visibility: visible; position: relative; on the active one.

Upvotes: 0

Aleksey V
Aleksey V

Reputation: 73

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.

Upvotes: 7

Guillaume Roberts
Guillaume Roberts

Reputation: 146

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!

Upvotes: 11

Bilal Maqsood
Bilal Maqsood

Reputation: 1246

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;
}

Upvotes: 0

Luke
Luke

Reputation: 5076

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

Upvotes: 9

Related Questions