html - Firefox text-indent bug on overflow hidden -
actually have progress bar use text-indent put text in middle of progress. all work fine in chrome , ie, isn't in firefox. (yeap, can't believe it) check difference in chrome , 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 , text-indent dynamic vars show expected result on fill progress bar. this looks unreported gecko bug. filed https://bugzilla.mozilla.org/show_bug.cgi?id=908706 as wor...