Chrome - stretch background image without keeping ratio

Question

I have the following code:

.container {
  width: 1rem;
  height: 2rem;
  background-image: url(https://dl.dropboxusercontent.com/u/1142760/static/svg/triangle.svg);
  background-size: 100% 100%;
  border: 1px solid black;
}

<div class="container"></div>

I expect the background image of the div to be stretched to the full width and height of said div.

Firefox behaves as expected:

But Chrome appears to have a bug that makes it interpret background-size differently:

You can see the live result in this fiddle

Re-creating the background image would not be a solution, as the div in question is of variable height.

Is there a work-around for this Chrome bug?

Answer 1

Maybe someone will find this post and not find the right answer. I found out that in my case, i had to add an attribute to my svg File:

<svg preserveAspectRatio="none" ...