背景图像（SVG）改变：悬停行动有趣

Question

When I hover over the div the background-image is supposed to change to a different one. However it seems to start with a small image that then zooms up to the actual size requested...

What could be causing this?

JSFiddle

 .animate { -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } div.rating_system { position: relative; float: left; clear: none; display: block; width: 260px; height: 50px; } div.rating_system input[type=radio] { display: none; visibility: collapse; } div.rating_system input[type=radio] + label { position: relative; float: right; clear: none; display: block; width: 18.4%; height: 100%; margin: 0; padding: 0 2% 0 0; outline: 0; cursor: pointer; background-image: url('data:image/svg+xml;utf8,<svg version="1.1" fill="#2C3E50" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 110 105" style="enable-background:new 0 0 110 105;" xml:space="preserve"><ellipse opacity="0.3" cx="55" cy="52.5" rx="55" ry="52.5"/><path d="M55,8c25.9,0,47,20,47,44.5S80.9,97,55,97S8,77,8,52.5S29.1,8,55,8 M55,0C24.6,0,0,23.5,0,52.5c0,29,24.6,52.5,55,52.5s55-23.5,55-52.5C110,23.5,85.4,0,55,0L55,0z"/></svg>'); background-repeat: no-repeat; background-position: center center; background-size: 40px; } div.rating_system input[type=radio]#star-5 + label { padding: 0 0 0 0; } div.rating_system:hover > input[type=radio] + label:hover, div.rating_system:hover > input[type=radio] + label:hover ~ label, div.rating_system > input[type=radio]:checked ~ label { background-image: url('data:image/svg+xml;utf8,<svg version="1.1" fill="#2C3E50" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 110 105" style="enable-background:new 0 0 110 105;" xml:space="preserve"><ellipse cx="55" cy="52.5" rx="55" ry="52.5"/></svg>'); } 

 <div class="rating_system"> <input type="radio" id="star-5" name="rating-01" value="5" class="animate"><label for="star-5" class="animate"></label> <input type="radio" id="star-4" name="rating-01" value="4" class="animate"><label for="star-4" class="animate"></label> <input type="radio" id="star-3" name="rating-01" value="3" class="animate"><label for="star-3" class="animate"></label> <input type="radio" id="star-2" name="rating-01" value="2" class="animate"><label for="star-2" class="animate"></label> <input type="radio" id="star-1" name="rating-01" value="1" class="animate"><label for="star-1" class="animate"></label> </div> 

Answer 1

It looks like a browser bug. I could advice you the cross-browser solution based on :after pseudo-element and transition by opacity :

JSFiddle (simplified your code for the snippet)

 .rating-system { float: left; display: block; width: 260px; height: 50px; } input { display: none; } label { position: relative; float: right; display: block; width: 18.4%; height: 100%; margin: 0; padding: 0 2% 0 0; outline: 0; cursor: pointer; background-image: url('data:image/svg+xml;utf8,<svg version="1.1" fill="#2C3E50" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="110" height="105"><ellipse opacity="0.3" cx="55" cy="52.5" rx="55" ry="52.5"/><path d="M55,8c25.9,0,47,20,47,44.5S80.9,97,55,97S8,77,8,52.5S29.1,8,55,8 M55,0C24.6,0,0,23.5,0,52.5c0,29,24.6,52.5,55,52.5s55-23.5,55-52.5C110,23.5,85.4,0,55,0L55,0z"/></svg>'); background-repeat: no-repeat; background-position: 50% 50%; background-size: 40px; } label:first-of-type { padding: 0; } label:after { content: ''; position: absolute; width: 100%; height: 100%; top: 0; left: 0; background-image: url('data:image/svg+xml;utf8,<svg version="1.1" fill="#2C3E50" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="110" height="105"><ellipse cx="55" cy="52.5" rx="55" ry="52.5"/></svg>'); background-repeat: no-repeat; background-position: 50% 50%; background-size: 40px; opacity: 0; -webkit-transition: opacity 0.2s ease-in-out; -moz-transition: opacity 0.2s ease-in-out; -o-transition: opacity 0.2s ease-in-out; transition: opacity 0.2s ease-in-out; } label:hover:after, label:hover ~ label:after, input:checked ~ label:after { opacity: 1; } 

 <div class="rating-system"> <input type="radio" id="star-5" name="rating-01" value="5"/> <label for="star-5"></label> <input type="radio" id="star-4" name="rating-01" value="4"/> <label for="star-4"></label> <input type="radio" id="star-3" name="rating-01" value="3"/> <label for="star-3"></label> <input type="radio" id="star-2" name="rating-01" value="2"/> <label for="star-2"></label> <input type="radio" id="star-1" name="rating-01" value="1"/> <label for="star-1"></label> </div>