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 button it first shows larger SVG and than it's downgrading to desired size. It's working smooth in all other browsers except Chrome.

Please check :

jfiddle

.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;
}
.button:hover {
  background: rgba(0, 0, 0, 0.9) 
    url('https://cdn.mediacru.sh/y/ypwpa6pIMXdX.svg') 
    top left no-repeat;
}

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

回答1:

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.

回答2:

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

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

来源：https://stackoverflow.com/questions/27760779/google-chrome-svg-background-transition-not-working-good

标签

html

google-chrome

svg

background-image

css-transitions