Last modified: 2014-02-13 13:29:28 UTC
Created attachment 14495 [details] Screen shot of search bar in Firefox https://gerrit.wikimedia.org/r/82100 generates a partially visible letter in the right end of the search bar in skin vector in Mozilla Firefox. Other browsers are not affected. See screen shot.
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
