CSS-Keyframe-Animation funktioniert nicht wie beabsichtigt in IE und Edge

Question

Ich habe diese Animation und es funktioniert wie ein Charme in jedem Browser außer IE und Edge. Sie können die Seite sehen hier https://jsfiddle.net/03ddygdx/

.progress-container { 
    position: relative; 
} 

.background-progress-bar, .progress-bar { 
    width: 100%; 
    height: 10px; 
    top: 0px; 
    left: 0px; 
    position: absolute; 
} 

.background-progress-bar { 
    background-color: pink; 
    z-index: 8; 
} 

.progress-bar { 
    background-color: red; 
    z-index: 9; 
} 

.indeterminate { 
    animation: indeterminate 2.5s infinite linear; 
} 

@keyframes indeterminate { 
    0% { 
    width: 30%; 
    left: 0%; 
    } 
    25% { 
    width: 50%; 
    left: 50%; 
    } 
    50% { 
    width: 10%; 
    left: 0px; 
    } 
    75% { 
    width: 30%; 
    left: 0%; 
    } 
    100% { 
    width: 0%; 
    left: calc(100% - 5px); 
    } 
} 

<div class="progress-container"> 
<span class="background-progress-bar"> 
    <span class="progress-bar indeterminate"></span> 
</span> 
</div> 

Im IE und Rand nicht die linke Eigenschaft gelten, die Spanne immer nach links zu verlassen. Ich habe versucht, die-ms-Animation-Eigenschaft, aber das funktioniert auch nicht.

Falls es darauf ankommt ich in meinem index.html diesen Meta-Tag bekam

<meta http-equiv="X-UA-Compatible" content="IE=edge"> 

Answer 1

bearbeiten: Ok, das Problem war das Hinzufügen eines calc(), um die Größe des linken Attributs zu berechnen, so dass die Bug ist da drin.

Edit 2: Ich habe einen Fehlerbericht zu diesem konkreten Fall, also wenn es irgendwelche Informationen darüber gibt es ich denke, man könnte es hier ansehen https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/12872907/

Nach meinem Kopf für ein an der Wand schlagen paar Stunden stellt sich heraus, dass es ein ie-Edge-Bug sein muss. Durch das Ändern der Keyframes wurde mein Problem gelöst.

@keyframes indeterminate { 
    0% { 
    width: 30%; 
    margin-left: 0%; 
    } 
    25% { 
    width: 50%; 
    margin-left: 50%; 
    } 
    50% { 
    width: 10%; 
    margin-left: 0px; 
    } 
    75% { 
    width: 30%; 
    margin-left: 0%; 
    } 
    100% { 
    width: 0%; 
    margin-left: 100%; 
    } 
} 

Hier ist die Arbeit an ie-Rande Beispiel https://jsfiddle.net/vwty99s9/1/

Ich denke, dieser Browser Probleme anwenden linke Werte auf Animationen hat, so einfach für margin-left links aus und du bist gut zu gehen.