Geek Answers Handbook

Google Chrome - SVG background transition doesn't work well

I have a question about the transition of SVG background in Chrome. It works fine and smoothly in Firefox, Safari, and Internet Explorer, but not in Chrome. When I press the button, the enlarged SVG is first displayed, and then it is reduced to the desired size. It works 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>
Run code
0
source share
2 answers

OK ... this is a transition. When these lines are commented out, it works without a transition, but without an elusive size effect.

all opacity, , Chrome, , , .

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

, - , ; . w3c .

0

, Chrome CSS3 Images .

@rfornal , CSS background-image . , . CSS Images Level 3 spec . , , .

Chrome ( Opera, Chrome Blink), .

Chrome -, , , 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>
+1

More articles:


All Articles