241893 - amazon.com - Text input boxes on sign-in page too narrow. Inputted text invisible.

Status: RESOLVED INCOMPLETE

(Tech Evangelism Graveyard :: English US, defect)

Description

[Jay Sheth]

User-Agent:       Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.6) Gecko/20040206 Firefox/0.8
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.6) Gecko/20040206 Firefox/0.8

On various parts of the Amazon.com site, including the sign-in, checkout and
"search-inside-this-book" pages, the text input boxes are too narrow (perhaps 10
- 20 pixels high). 

As a result of this (or for some other unknown reason) any text typed into the
username, password, find-book-keyword, credit card number, or other input boxes
is invisible. If you select the inputted text it'll still be there. (You can
even copy it).

I think this is the result of some IE-specific or mal-formed HTML on Amazon's
end. It could also be a weird (rendering / CSS) bug in Gecko.

(I have another hunch: it could also be due the presence of certain foreign
fonts on the system, such as the Hindi font as provided by bbcnews.com.)

Reproducible: Always
Steps to Reproduce:
0. If you are signed into Amazon.com, sign out first.
1. Go to Amazon.com
2. Click on "Your Account" on the top right hand corner (to the left of "help")
3. Click on "Print Invoices"
4. You are asked to sign in with an email address and password
5. Try typing in the text input boxes. The input is not visible.

Actual Results:  
The inputted text is not visible.

Expected Results:  
Ensured that any text typed into an input box is visible.

This also occured in the Mozilla Suite (1.7b, I think).

Comment 1

[Jay Sheth]

Attachment: Email Address and Password Text Input Boxes are Irregularly Sized. Inputted text is not legible.

Comment 2

[Jay Sheth]

Attachment: Irregularly sized Amazon quicksearch input box.

Comment 3

[Jay Sheth]

Attachment: Amazon's credit-card entry screen is also messed up (input-boxes wise).

Comment 4

[Jay Sheth]

I think I found the source of the problem:

Embedded in the sign-in page is this piece of CSS:

INPUT { font-family: fixed; }

There could be several instances of this CSS rule.

I used Jesse Ruderman's Edit Styles bookmarklet to delete this CSS rule, and
like magic, the text boxes expanded and came back to normal.

The bookmarklet can be found at:
http://www.squarefree.com/bookmarklets/webdevel.html#edit_styles

Comment 5

[Adam Roben]

WFM Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.7b) Gecko/20040411 Firefox/0.8.0+

Text input boxes look like any other, although for some reason they are trying
to use Helvetica or some font like that instead of my default Bitstream Vera
Sans Mono

Comment 6

[José Jeria]

WFM: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8a) Gecko/20040426
Firefox/0.8.0+

Please disable all extensions and retry.

Comment 7

[Jay Sheth]

I tried disabling all extensions for Firefox, and still the problem occured.
I am attaching the first of some testcases next ...

I think the use of the rule INPUT { font-family: fixed; } forces Mozilla to use
some default (fixed width?) font on my system which leads to invisble text
inside of text input boxes.

Comment 8

[Jay Sheth]

Attachment: Testcase to show input box whose contents are selectable, yet invisible

This is a simple testcase showing an input box whose contents are invisible
after having used the CSS rule:

INPUT { font-family: fixed; }

In this case, the text input box isn't "short" or "narrow" or "squeezed", but
any text typed into it is invisible.

By press Control A you can prove the existence of the entered text.

Comment 9

[Jay Sheth]

Sorry for all the notes for those who are receiving these notices.

I just noticed something *really* weird though:
in the testcase that I just attached above, if I use Jesse Ruderman's Edit
Styles bookmarklet to remove the offending (and lone) CSS rule in that file, it
goes back to normal and the inputted text becomes visible; BUT, if I put the
rule back in, the input box goes back to the "short" / "squeezed" look that the
input boxes at Amazon.com have. 

This is one of the weirdest bugs I have ever seen. It might be a bug in Gecko
(more specifically in the CSS / font part of it).

Comment 10

[José Jeria]

Testcase works fine for me

Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8a) Gecko/20040427
Firefox/0.8.0+

Comment 11

[Jay Sheth]

Attachment: For me, even paragraphs with this same rule are invisible.

Comment 12

[Alfonso Martinez]

WFM with trunk Mozilla: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8a)
Gecko/20040426

Comment 13

[Warner Young]

Jay, check your fixed font font size in Options.  I just tried a number of
different sizes, and a size of 11 works, but 12 and above cause some of the text
to disappear in your testcase.  I don't know *why* that happens, but I'm pretty
sure it's related to font size options.

Comment 14

[Mike Kaply [:mkaply]]

I think you've gone too far with your testcases.

The original page definitely is broken on Mozilla and works on IE.

Your testcases are broke on IE as well.

I see this and many people on my team have seen this.

Confirming.

Comment 15

[Mike Kaply [:mkaply]]

I take it back. You are totally correct.

The page Amazon sends to IE doesn't have the 

INPUT { font-family: fixed; }

line.

And incidentally, INPUT { font-family: fixed; } is blank in IE as well.

So essentially the problem here is not Mozilla, it's evangelism.

If you save the Amazon site that fails in Mozilla to disk and load it in IE, it
fails there as well.

Comment 16

[Mike Kaply [:mkaply]]

I remember this now.

We investigated this.

Bring up charmap and select the font "fixed" from your dropdown.

You have a font on your system called "fixed" that has no characters in it for
some reason.

That's what's being used in this case.

It also fails on IE if you have the font "fixed" installed.

So the question is what Mozilla should do in this case (to work better than IE) :)

Comment 17

[Doron Rosenberg (IBM)]

http://www.w3.org/TR/CSS21/fonts.html#font-family-prop:

"Font family names that happen to be the same as a keyword value (e.g.
'initial', 'inherit', 'default', 'serif', 'sans-serif', 'monospace', 'fantasy',
and 'cursive') must be quoted to prevent confusion with the keywords with the
same names. UAs must not consider these keywords as matching the '<family-name>'
type."

Since Amazon isn't quoting the name, the spec seems to say that mozilla is wrong
and it should choose the fixed keyword, not the font named fixed.

Moving to CSS, could be an evangelism issue.

Comment 18

[Jay Sheth]

Thanks for confirming mkaply.

I will test this further in IE.

I think I have found one more clue: In Moz 1.7 beta, I opened up Composer, typed
some text and then selected it. Then I went to Format | Font and scrolled down.
At the very bottom of the list I found a font named "fixed". I looked in
C:\windows\fonts\ but I could not find such a font.

I wonder where this mystery font came from. Anyone have ideas on this new
discovery / development?

Comment 19

[Doron Rosenberg (IBM)]

bah, sorry, there is no keyword called "fixed" - evangelism.

Comment 20

[Doron Rosenberg (IBM)]

bah, sorry again, reassigning to the correct owners, sorrt for the spam.

Comment 21

[Jay Sheth]

I found an interesting work-around to this problem.

I downloaded the Font-Creator program from 
http://www.high-logic.com/

I opened one of my existing fonts (Larabie Bold by Ray Larabie).

By going to "Format | Naming", I changed its font-family name (as well as other
descriptive fields such as unique identifier, full font name and postscript
name) to 'fixed'.

I copied the file to C:\Windows\Fonts which installed the font. (No font named
'fixed' was installed before. The name 'fixed', however, showed up in the
Windows charmap utility.)

Now with the previous testcases that I attached, the text in the form fields
appears in the easy-to-distinguish Larabie Bold font.

Comment 22

[Boris Zbarsky [:bzbarsky]]

*** Bug 232256 has been marked as a duplicate of this bug. ***

Comment 23

[Boris Zbarsky [:bzbarsky]]

*** Bug 243731 has been marked as a duplicate of this bug. ***

Comment 24

[Cody 'codeman38' Boisclair]

For what it's worth, the invisible 'fixed' font lives in the phonetic.fon file
installed with some versions of MS Office.  Deleting that from the Fonts folder
fixed the problem for me.

Still, Amazon needs to fix that (no pun intended)... just changing the specified
font from fixed to monospaced should make things work properly.

Comment 25

[Mike Kaply [:mkaply]]

I just went to the page in question and fixed is not in the CSS anymore.

Is it possible they fixed this?

Comment 26

[Jayesh Sheth]

I think Amazon has fixed this on their (amazon.com) site, but it remains on the
Amazon-run target.com site.

Comment 27

[Felix Miata]

Conforming summary to TFM item 10 at 
http://www.mozilla.org/projects/tech-evangelism/site/procedures.html#file-new

Comment 28

[:Gavin Sharp [email: [e-mail]]]

*** Bug 281981 has been marked as a duplicate of this bug. ***

Comment 29

[sconte]

(In reply to comment #28)
> *** Bug 281981 has been marked as a duplicate of this bug. ***

I just reported bug 281981 which was just declared a duplicate of this bug.  I
have a problem, however: until i reported today (11 FEB 2005), the last post was
dated October 2004. 3.5 months later I am still reporting the very same problem.
 What is the solution?

Comment 30

[Mike Kaply [:mkaply]]

The solution is to remove the font called "fixed" from your system.

Comment 31

[sconte]

(In reply to comment #30)
> The solution is to remove the font called "fixed" from your system.

Can someone reconcile the following:

1. Kaply posted in October : "I think Amazon has fixed this on their
(amazon.com) site, but it remains on the Amazon-run target.com site. "

But I still had the problem in 2005 on amazon.com. So I don't understand why he
stated the above quote in October, as if the problem had disappeared then?

2. Kaply also suggested in post #30 that the solution was to remove the fixed
font from the system.  There is no such font on my system.

3. I got a full display of previously hidden characters by doing this: in
Firefox, click on " VIEW | PAGE STYLE | NO STYLE (instead of Basic Page Style)".
 Of course the page no longer looked attractive, but all invisible characters
became visible.  As soon as I returned to "Basic Page Style", same problem. So
this trick was not a happy solution, though it may provide a clue: the problem
might in how Firefox makes the "Basic Page Style" work. It trips on something.

4. As far back as October 2004, Cody 'codeman38' Boisclair (post #24) came up
with that AMAZING find : remove phonetic.fon from c:\windows\fonts ! This
actually worked for me too ... with one twist, however. The hidden characters in
the boxes partially appeared (progress). But to get a full display, one more
step was needed: increase the font size for the whole page with Ctrl+ +.

Conclusion:  The last 2 "solutions" were in fact just tricks, workarounds just
to be able to see hidden information.  The real solution is to avoid any
tinkering by Firefox general users, because there won't be invisible characters
in the first place.  Therefore, as far as I am concerned, this error has not
been satisfactorily solved as suggested in post #30. Maybe I took post30's use
of the word "solution" too seriouly :>}. 

Comment 32

[Phil Ringnalda (:philor)]

*** Bug 355517 has been marked as a duplicate of this bug. ***

Comment 33

[Phil Ringnalda (:philor)]

*** Bug 358918 has been marked as a duplicate of this bug. ***

Comment 34

[Phil Ringnalda (:philor)]

*** Bug 360962 has been marked as a duplicate of this bug. ***

Comment 35

[Chris Lawson (gone)]

INCOMPLETE due to lack of activity since the end of 2009.

If someone is willing to investigate the issues raised in this bug to determine whether they still exist, *and* work with the site in question to fix any existing issues, please feel free to re-open and assign to yourself.

Sorry for the bugspam; filter on "NO MORE PRE-2010 TE BUGS" to remove.