Clever Geek Handbook

Moving CSS in Firefox

I have 3 elements growing on :hover

using a CSS transition. Two of them work fine, but the last one flickers in Firefox but works in Chrome and IE. So the problem only exists 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 could be causing this problem?

+3


source to share


4 answers


I had the same problem, on several sites I have built using CSS scaling, the first time you hover over the images. They are fine afterwards. Doesn't happen in any other browser and only recently - obviously a bug in later versions of FF.

Anyway, just fixed it by changing the grayscale filter. Try this CSS on your img:



filter: grayscale (1%);

It doesn't cause a noticeable color difference, but the flicker is gone!

+8


source


backface-visibility: hidden

tends to fix a lot of flickering problems, try taking a picture.



+6


source


Try to put:

will-change: transform;

Into your .contact

this will cause your object to turn 3d so that it doesn't flicker.

Sometimes it also helps to put it in the kids of your class, for example if you have .contact > .img

or something like that.

+2


source


Add -moz-transition:

for Firefox. I have an update in the code here. try it, 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;
}
0


source






More articles:


All Articles