background-image (SVG) change on :hover acting funny

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>