500550 - Text input displayed too wide when certain fonts are used

Status: RESOLVED DUPLICATE of bug 491114

(Firefox :: General, defect)

Description

[Ryan Paul]

User-Agent:       Mozilla/5.0 (X11; U; Linux x86_64; en-US; rv:1.9.1b4pre) Gecko/20090401 Ubuntu/9.04 (jaunty) Shiretoko/3.5b4pre
Build Identifier: Mozilla/5.0 (X11; U; Linux x86_64; en-US; rv:1.9.1b4pre) Gecko/20090401 Ubuntu/9.04 (jaunty) Shiretoko/3.5b4pre

Input elements with type=text are displayed improperly on many web sites. Their width exceeds with the size of the window. This problem only appears to affect Linux and only shows up when certain fonts are used as the default system font in GNOME (I get it consistently with Lucida Grande but not with Liberation Sans).

I have attempted to reproduce this issue in several different versions of Firefox. It doesn't happen in FF3, but it does happen in all recent versions of FF3.5, including the RC3.


Reproducible: Sometimes

Steps to Reproduce:
1. Configure GNOME to use Lucida Grande as the "Application Font"
2. Launch Firefox and browse to Google.com
Actual Results:  
The Google search text input stretches all the way across the page.

Expected Results:  
The input textbox should be displayed at with a normal width.

Comment 1

[Ryan Paul]

Attachment: Example of text input rendered incorrectly on Google

Comment 2

[Micah Gersten]

Ubuntu bug:
https://bugs.launchpad.net/bugs/383020

Comment 3

[mozilla]

I also have this bug, as discussed here:

http://episteme.arstechnica.com/eve/forums/a/tpc/f/96509133/m/970006440041

It happened on 3.5 both on Hardy Heron and on Jaunty.

Build identifier: Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.9.1) Gecko/20090630 Ubuntu/9.04 (jaunty) Shiretoko/3.5

Comment 4

[william]

Thanks for the link, it helped me narrow down the cause, and fix the problem. I had my gnome desktop fonts set to Lucida Grande. Setting them to Liberation Sans and restarting Firefox fixed the issue. So if others could try setting their fonts to Lucida Grande and see if they can reproduce the issue, perhaps we can fix this permanently.

Comment 5

[mozilla]

To be precise, I only had to change "Application Font" to Liberations Sans - immediately Firefox fixed itself.

Comment 6

[Khairul Aizat Kamarudzzaman]

It happen for me in Karmic , I use Lucida Grande as my font. But for firefox 3.0.11 work well without any issue if i use Lucida Grande as my font.

Comment 7

[Khairul Aizat Kamarudzzaman]

Attachment: Default Page in Karmic

Comment 8

[Andrew Udvare]

I have this same problem with Firefox 3.5.2 on Windows and Linux, using Lucida Grande for Serif and Sans Serif and Lucida Console for Monospace.

Comment 9

[william]

This bug causes a problem with Firefox when viewing the prerelease of the new drupal website: http://staging1.drupal.org/

They have Lucida Grande as the preferred font. The username and password fields on the left of the page are about twice as long as they should be.

Comment 10

[Andrew Udvare]

Attachment: Browser comparison for input with no specified width in CSS or attribute: Firefox 3.0.10 (Windows), Firefox 3.5.2 (Windows), Safari 4.0.2 (Windows)

From the HTML source:
<input type="text" name="Email"  id="Email" size="18" value="" class='gaia le val' />
<input type="password" name="Passwd" id="Passwd" size="18" class="gaia le val" />

Notice there is no width="", nor do the classes specify width. Also from the source (CSS):
.gaia.le.val { font-family: Arial, Helvetica, sans-serif; font-size: smaller; }

I do see this problem on numerous sites, not just iGoogle's log in. The other sites do not have CSS for their <input>s nor do they specify width. For those, the input boxes often go off screen.

I do not know if this a bug with Firefox or Cairo. But on Linux I have not changed my Cairo version and 3.0.10 renders "correctly". Should not make Firefox the odd one out by rendering <input>s this way.