Google Chrome - Svg Background Transition Not Working Good

I have a question about SVG background transition problem in Chrome. It works fine & smooth in Firefox, Safari and Internet Explorer but not in Chrome. When I am hovering the b

Solution 1:

This seems to be a bug with the Chrome implementation of new CSS3 Images specification rules for transitioning images.

As @rfornal noted, the original CSS transitions spec did not include background-image as an animatable property. Images would therefore transition immediately, regardless of any transition settings. However, the latest editor's draft of the CSS Images Level 3 spec does define rules for how to transition images. These rules suggest the browser should transition the size of image from one to the other while fading between them.

So far, image transitions have only been implemented in Chrome (and Opera, which uses Chrome's Blink rendering engine), which is why none of the other browsers have any issue.

To prevent Chrome from trying anything fancy with the image transition, explicitly state which properties you want to transition instead of using transition: all.

.button {
  background: rgba(0, 0, 0, 0.6) 
    url('https://cdn.mediacru.sh/b/bnN8POn3lz8M.svg') 
    top left no-repeat;
  background-position: center;
  background-size: 100%!important;
  width: 200px;
  height: 200px;
  display: block;
  -webkit-transition: all 0.2s ease;
  -moz-transition: all 0.2s ease;
  transition: all 0.2s ease;
  
  /* reset to only transition the specific properties
     you want to change, NOT including background-image */
  -webkit-transition-property: background-color, background-position;
  transition-property: background-color, background-position;
}
.button:hover {
  background: rgba(0, 0, 0, 0.9) 
    url('https://cdn.mediacru.sh/y/ypwpa6pIMXdX.svg') 
    top left no-repeat;
}

<aclass="button"href="#"></a>

Solution 2:

OK ... it's in the transition. When those lines are commented out, it works without a transition, but without the jumpy sizing effect.

Changing the all in the transitions to opacity seems to work in Chrome, but I'm not sure this is the effect you want.

-webkit-transition: opacity 0.2s ease;
-moz-transition: opacity 0.2s ease;
transition: opacity 0.2s ease;

Unfortunately, my first attempt at a fix was to animate the background image and you cannot use transition on background-image; see the w3c list of animatable properties.