CSS sprite not working on Chrome mobile

Question

HTML:

<span class="activity-2">&nbsp;</span>

CSS:

.activity-2 {
    background-position: 0 -80px;
    border: 1px solid #e4e4e4;
    border-radius: 2px;
    background-image: url(https://i.imgur.com/E5Jr2Tv.png);
    display: block;
    height: 40px;
    text-indent: -1000em;
    width: 40px;
    float: left;
}

Fiddle: https://jsfiddle.net/7mqkofuq/

The background image displays correctly on every desktop / mobile browser I've tested, except from Chrome mobile. Why??

Answer 1

try adding preserveAspectRatio="none" to your class