Firefox text-indent bug on overflow hidden

Question

Actually i have a progress bar that use text-indent to put some text in the middle of progress.

all work fine in Chrome and IE, but isn't in Firefox. (yeap, i can't believe it)

Check the difference in Chrome and Firefox.

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

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

Width in bar2 and text-indent are dynamic vars to show the expected result on fill the progress bar.

Answer 1

This looks like a previously unreported Gecko bug. I filed https://bugzilla.mozilla.org/show_bug.cgi?id=908706

As a workaround, are you able to use a text-indent value that's not a percentage?