title: Firefox text-indent bug on overflow hidden
body: <p>Actually i have a progress bar that use text-indent to put some text in the middle of progress.</p>
  
  <p>all work fine in Chrome and IE, but isn't in Firefox. (yeap, i can't believe it)</p>
  
  <p>Check the difference in Chrome and Firefox.</p>
  
  <p><a href="http://jsfiddle.net/ZGyaz/1/" rel="nofollow">http://jsfiddle.net/ZGyaz/1/</a></p>
  
  <p>animated version</p>
  
  <p><a href="http://jsfiddle.net/ZGyaz/19/" rel="nofollow">http://jsfiddle.net/ZGyaz/19/</a></p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div class="container"&gt;
      &lt;div class="bars bar1"&gt;sametext&lt;/div&gt;
      &lt;div class="bars bar2"&gt;sametext&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>.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;
  }
  </code></pre>
  
  <p>Width in bar2 and text-indent are dynamic vars to show the expected result on fill the progress bar. </p>