Ошибка текстового отступа Firefox при переполнении

Question

На самом деле у меня есть индикатор выполнения, который использует текстовый отступ, чтобы поместить некоторый текст в середине хода.

все работает нормально в Chrome и IE, но не в Firefox. (да, я не могу в это поверить)

Проверьте разницу в Chrome и Firefox.

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

анимационная версия

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; 
} 

Ширина в bar2 и текстовый отступ - это динамические вары, отображающие ожидаемый результат при заполнении индикатора выполнения.

Answer 1

Это похоже на ранее не зарегистрированную ошибку Gecko. Я подал https://bugzilla.mozilla.org/show_bug.cgi?id=908706

Как обходным способом вы можете использовать значение отступа текста, которое не является процентом?