CSS - IE9 image de fond d'image avec gradient linéaire (svg généré) ne se répète pas correctement

Question

J'ai essayé de chercher une réponse sur le web pour ce problème particulier, mais honnêtement, je ne sais pas vraiment ce qui se passe ici. J'ai créé un violon here qui montre la situation si vous voulez jouer.

Voici le code qui fonctionne dans Chrome, Firefox et IE10 +

code HTML

code CSS

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

je besoin d'une solution de repli pour IE9. Comme vous pouvez le voir dans le violon que j'ai déjà généré et svg image qui fonctionne avec IE9. Actuellement, la div est 113px x 14px et la taille de l'arrière-plan est 4px

Le problème est que si la largeur est> 113, les bandes ne sont plus affichées mais elles affichent uniquement la couleur de fond. Si à la place je règle une hauteur plus élevée à un certain point, les bandes sont clairement affichées à nouveau.

Comment puis-je résoudre ce problème? À quoi est-ce lié? Toute aide appréciée.

Answer 1

Je fixe le faire

background-size: 4px 4px; 

Maintenant, je vais creuser dans la documentation pour trouver pourquoi.