Weird CSS3 Transition (flickering)

Question

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 brow

Answer 1

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

Answer 2

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

Answer 3

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

Answer 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/

Answer 5

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

Answer 6

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.