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.
animated version
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 workaround, able use text-indent value that's not percentage?
Comments
Post a Comment