css sprite in firefox

HTML

<div>With CSS Sprite:</div>
<i class="circle"></i><i class="disk"></i>
<div>Without CSS Sprite:</div>
<i class="whole"></i>

CSS

.whole {
    width: 80px;
    height: 80px;
    background-image: url("http://zohooo.github.io/inliner/outliner.svg");
    background-size: 100% 100%;}
i {
    width: 16px;
    height: 16px;
    display: inline-block;
    background-image: url("http://zohooo.github.io/inliner/outliner.svg");
    background-size: 500% 500%;
}
.circle {    
    background-position: -32px 0;
}
.disk {    
    background-position: 0 -16px;
}