Firefox Text-Einzug Bug auf Überlauf versteckt

Question

Eigentlich habe ich einen Fortschrittsbalken, Text-Einzug verwenden, um etwas Text in der Mitte des Fortschritts.

alle funktionieren in Chrome und IE, aber nicht in Firefox. (yeap, ich kann es nicht glauben)

Überprüfen Sie den Unterschied in Chrome und Firefox.

http://jsfiddle.net/ZGyaz/1/

animierte Version

http://jsfiddle.net/ZGyaz/19/

HTML

<div class="container"> 
    <div class="bars bar1">sametext</div> 
    <div class="bars bar2">sametext</div> 
</div> 

CSS

.container{ 
    border:1px solid #09c; 
    height: 20px; 
    width: 100%; 
    position: relative; 
} 

.container .bars{ 
    text-indent: 45%; 
    position: absolute; 
    top:0; 
    font-family: arial; 
    color: #09c; 
} 

.container .bar2{ 
    background-color: #09c; 
    width: 50%; 
    color: #fff; 
    overflow: hidden; 
} 

Die Breite in bar2 und der Texteinzug sind dynamische Variablen, um das erwartete Ergebnis beim Füllen des Fortschrittsbalkens anzuzeigen.

Answer 1

Das sieht wie ein zuvor nicht gemeldeter Gecko-Bug aus. Ich habe https://bugzilla.mozilla.org/show_bug.cgi?id=908706

Als Workaround können Sie einen Text-Einzug Wert verwenden, der kein Prozentsatz ist?