CSS - IE9 issue background image with linear gradient (svg generated) does not repeat correctly

Question

I tried to look for an answer on the web for this particular problem, but honestly don't really know what is going on here. I have created a fiddle here that shows the situation if you want to play around.

Here is the code that works in Chrome, Firefox and IE10+

HTML code

CSS code

.low {
  width: 113px;
  height: 14px;
  background-color: red;
  background-image: linear-gradient(to right, white 50%, transparent 0);
  background-size: 4px;
  background-repeat: repeat;
}

I need a fallback for IE9. As you can see in the fiddle I already generated and svg image that works with IE9. At the moment the div is 113px x 14px and the background size is 4px

The problem is, if the width is > 113, the stripes are not displayed anymore but instead it only shows the background color. If instead I set a higher height at some point the stripes are clearly displayed again.

How can I solve this ? What is it related to ? Any help appreciated.

Answer 1

I fixed doing this

background-size: 4px 4px;

Now I am going to dig in the docs to find why.