Bad resizing of svg images in Chrome
===

I'm trying to create a web page using CSS3, svg images and elements with sizes in <i>em</i> units. I want to accomplish having two <i>div</i>s with the same sizes, one under another, with first one having svg background stretched over it and second having plain background. Here's an example:

    <div style="width: 12em; height: 1em; background-image: url('background.svg'); background-size: 12em 1em;"></div>
    <div style="width: 12em; height: 1em; background: black;"></div>

The problem I have is that after resizing the site ("ctrl +"), svg image is not being fully stretched to the content of <i>div</i>, resulting in different widths of backgrounds. I have this problem in Google Chrome 20.0.1132.57 @ Linux Mint 13 and Windows 7. It doesn't seem to appear in Firefox.

This is a similar problem to [Solution for Chrome putting a gap between background image tiles when using svg for image](http://stackoverflow.com/questions/11201248/solution-for-chrome-putting-a-gap-between-background-image-tiles-when-using-svg). I already made the svg background image sizes equal to 120px x 10px.

The question is how to fix this while preferably keeping svg format of image and <i>em</i> units in css.