I couldn't reproduce this using Firefox 26, but then it autoupdated to 27 and I can see it. This is pretty obviously a bug in Firefox…

I can try playing with some workarounds, I guess. Who wants to report an upstream bug?

So it looks like the stylesheet is trying to hide the 'value' on the <input> with 'text-indent: 100%' and 'overflow: hidden'. This apparently doesn't *quite* shove the text all the way out of the way.

Not sure whether that's a regression in Firefox or if it's per spec and it all just looks weird. But having text in a button and trying to hide it by moving it offscreen is weird and probably something to be avoided?

Is there a better way to have it not show text in a graphical environment?

Or, you could bump it up to like text-indent: 200%...

Change 111476 had a related patch set uploaded by Bartosz Dziewoński:
Vector: text-indent workaround for Firefox 27 bug

https://gerrit.wikimedia.org/r/111476

(In reply to comment #2)

Not sure whether that's a regression in Firefox

I am positive it is, especially since it works in all other browsers, and used to work on Firefox.

But having text in a button and trying to hide it by moving
it offscreen is weird and probably something to be avoided?

Is there a better way to have it not show text in a graphical environment?

If you know of a better way, I'd love to hear about it. This is a somewhat widely used technique for replacing textual buttons with icons in CSS.

Couple of upstream bugs that may be relevant based on description:

"Inconsistent layout with percentage text-indent" https://bugzilla.mozilla.org/show_bug.cgi?id=718157

"Percentage text-indent handled incorrectly in overflow:hidden block" https://bugzilla.mozilla.org/show_bug.cgi?id=908706

I notice if I set the text-indent to the pixel value that is listed as the computed style value (224px in my case), the text disappears as expected, but leave it at 100% and we've got a little extra overflow. So it may be percentage-related in some way...

This actually seems to have some more issues between browsers… I tested Firefox 27, Opera 12 (Presto-based) and Opera 20 (Blink-based) and each of the displays it differently.

As far as I can tell only Opera 12 rendering is correct according to the spec.

Testcase:

<style>
div {
width: 50px; background: red;
}
p, input {
width: 50px; height: 50px;
text-indent: 100%; white-space: nowrap;
}
</style>
<div>
<p>Lorem ipsum dolor sit amet.</p>
<input value="Lorem ipsum dolor sit amet." type=submit />
</div>

Screenshots:

• Firefox 27: http://i.imgur.com/90TDK3d.png
• Opera 12: http://i.imgur.com/l1cm37i.png
• Opera Next 20: http://i.imgur.com/sHuGkRZ.png

Change 111476 merged by jenkins-bot:
Vector: text-indent workaround for Firefox 27 bug

https://gerrit.wikimedia.org/r/111476