Another small find for SVG background images in IE, after my recent post on SVG background image sizing. If you set a background size in ems on something that can't be expressed with a finite number of decimals, the rendering of the SVG will become slightly blurry and always seems to round up in terms of the shape sizing, causing it to become clipped.

An example: if my body font size is 15 pixels, an element of 20 by 20 pixels will be 1.333333333... by 1.333333333... ems. If I express the background size dimensions of an SVG graphic inside that element either using ems (1.33334em for example) or percentages (100%), it will be blurry. If I write it in pixels, it will look fine. If I set the body font-size to 16 pixels and use a size of 1.25em, it also looks fine. The bug doesn't seem to be related to how big or small the SVG is (I created a bunch of test cases over at JSBin). All other browsers I've tested seem to handle the rounding correctly and display the image sharply at all sizes and all methods.

This bug exists in all versions of IE that support SVG, including the Edge technical preview. I've filed a bug with the IE team, so hopefully it'll get fixed soon.