While resizing icons on a sprite sheet by scaling the image with CSS works fine in Chrome, Firefox seems to scale the graphic correctly but it still takes up the same space as the unscaled version.
Even though I found -moz-focus-inner which removed some padding, it doesn't seem to be related to the issue.
Attempts to reduce the size of the image in CSS resulted in cropping then scaling, rather than scaling then cropping which breaks Chrome's version. This is the outcome in Firefox :(
Without wanting to add more tags to fix it, such as wrapping the <i> with a <span> and setting the span's CSS to width:x and height:x and overflow:hidden, I'm specifically interested in a CSS solution to resolve this without creating another sprite sheet, changing the HTML, or using JS, if there is one.
<button class="btn"><i class="icon"></i></button>
<button class="btn"><i class="icon icon-small"></i></button>
CSS
.btn, .btn-small{
border:0;
background:#000;
padding:5px;
margin:5px;
}
.icon{
width:50px;
height:50px;
background-image:url(https://ssl.gstatic.com/gb/images/v1_53a1fa6a.png);
background-position: -145px -75px;
background-repeat:no-repeat;
display:inline-block;
}
.icon-small{
zoom:0.5;
-moz-transform:scale(0.5);
-moz-transform-origin: 0 0;
}