40

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 browser is Google Chrome

See here

<button>Log In</button>​

CSS:

button {
    background: #ff3019;
    background: -moz-linear-gradient(top,  #ff3019 0%, #cf0404 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ff3019), color-stop(100%,#cf0404));
    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%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff3019', endColorstr='#cf0404',GradientType=0 );
    border:1px solid #890000;
    display:block;
    margin:0 auto;
    width:200px;
    padding:5px 0;
    border-radius:8px;
    color:#fff;
    font-weight:700;
    text-shadow:0 1px 1px #000+50;
    box-shadow:0 2px 3px #000+150;
    -webkit-transition:background linear .5s;
}
button:hover {
    background:#ff3019;
}
button:active {
    background:#cf0404;
}

​

Community
  • 1
  • 1
Jürgen Paul
  • 14,299
  • 26
  • 93
  • 133

8 Answers8

118

I got rid of the flickering. Add «-webkit-backface-visibility: hidden;» to the elements you are transitioning. Voilà!

Wh1T3h4Ck5
  • 8,399
  • 9
  • 59
  • 79
Miguel Ángel Arroyo Rosales
  • 1,212
  • 1
  • 9
  • 2
  • 1
    Gradients and transitions don't work together seems to be the only answer: http://stackoverflow.com/questions/3790273/webkit-support-for-gradient-transitions – Peter Ehrlich Feb 07 '13 at 08:33
  • 1
    Amazing, this fixed a flickering issue I had on iPad when using a script to fade a container's opacity. – MyNameIsKo Oct 10 '13 at 21:25
  • 1
    I had an issue where I was transitioning an element's opacity that also had a text-shadow applied. It seemed that fading the opacity combined with the gradient nature of a shadow caused weird flickering. -webkit-backface-visibility: hidden fixed it! Although now, in 2015 you can just put "backface-visibility: hidden" dropping the -webkit prefix. – Aaron May 27 '15 at 23:43
  • 1
    Is there a reason to not apply this to all elements using a `*` if I'm doing a lot of transitions? – Sam Eaton May 27 '16 at 03:01
  • 1
    also, if you're transitioning an element that contains an image. Do apply the property to the img as well. That worked for me – ion Dec 16 '16 at 10:18
  • I had this very same issue but it didn't happened when the Chrome devtools were opened: only happened when they were closed, which make it much trickier to solve. – Lluís Ulzurrun de Asanza Sàez Sep 21 '18 at 18:15
12

Miguel is right about backface-visiblity fixing the annoying flash. However, I'm using transform scale and the SVG animated will not be sharp after scaling. It is sharp if you don't use the backface-visiblity property.

So either you got a nice animation with a blurry graphic, or a nice looking graphic with screen flashes.

You can however add the following line to the parent of the object to be transitioned, which will fix the flashing of the screen and still renders your graphic sharp after scaling.

-webkit-transform: translate3D(0, 0, 0);
JanTheHuman
  • 220
  • 2
  • 6
4

I believe it is currently an issue without a fix. I too have run into this before playing around and could not get it to work. Using a solid color seems to be fine, or faking it with a background image.

Similar Question here: Webkit support for gradient transitions

More detail: http://screenflicker.com/mike/code/transition-gradient/

Community
  • 1
  • 1
Graham Conzett
  • 8,344
  • 11
  • 55
  • 94
1

The flicker you're noticing is actually the button's background color being changed to transparent (so, the button "flashes" or turns white in your Fiddle because the body's background-color is white).

If you overlay your button on top of another element with the exact same size/height/background-color (including gradients), the "flicker" won't be noticeable.

Check here for an example using your fiddle: http://jsfiddle.net/hrDff/12/

Still definitely a bug tho...

Funktr0n
  • 1,711
  • 2
  • 16
  • 23
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.

subutai5467
  • 11
  • 1
0

With a similar issue, Jan's suggestions helped improve for all background images but one. I got rid of the flickering of the last one by noticing two conflicting positioning rules. I had for a position:static one rule margin-top:-3em (minus) and the other one margin-top:5em (plus). Thus, I suggest you carefully check the consistency of the positioning when you experience such an issue.

In your case Michelle, I've been testing with a longer delay 1s to 3s, which helped me understand what is that clearer stage, a flash with a very short delay. Your gradient starts with no background in fact and what you see is the background of the page. I got this information by changing the background of the body of my test page from ivory to black.

When I tried your gradient on a black background I got a black stage/flash (easier to see at 3s). Perhaps it should be wise to test the order of your rules, and also try to understand why the gradient starts from the background of the body or parent and not from your background.

A workaround could be to set your button in a div with your button red background at the exact size and shape of your button.

Irene S.
  • 1
  • 2
0

I solved the blinking like this:

Html as follows:

<div class="pswp__item" style="display: block; transform: translate3d(464px, 0px, 0px);"><div class="pswp__zoom-wrap" style="transform: translate3d(87px, 248px, 0px) scale(0.57971);"><img class="pswp__img" src="/platform/advice/feedback/downloads?attachmentIds=1304495004557536" style="opacity: 1; width: 414px; height: 414px;"></div></div>

css as follows:

.pswp__zoom-wrap{
transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
}
.pswp__zoom-wrap *{
-webkit-backface-visibility: hidden!important;
backface-visibility: hidden!important;
}
.pswp__item{
transform: translate3D(0, 0, 0);
-webkit-transform: translate3D(0, 0, 0);
}
Jean-François Corbett
  • 37,420
  • 30
  • 139
  • 188
Youth overturn
  • 341
  • 5
  • 7
-1

This link fixed it for me. You just have to add a line to the css of the element that's flickering:

http://nathanhoad.net/how-to-stop-css-animation-flicker-in-webkit

Dave
  • 7
  • 1
  • 2
    Note that [link-only answers are discouraged](http://meta.stackoverflow.com/tags/link-only-answers/info), SO answers should be the end-point of a search for a solution (vs. yet another stopover of references, which tend to get stale over time). Please consider adding a stand-alone synopsis here, keeping the link as a reference. – kleopatra Sep 14 '13 at 08:06
  • Link is now broken. – lawrence-witt Jul 09 '21 at 22:33