525854 - Input elements of type 'text' are sometimes being resized if using css :focus

Status: UNCONFIRMED

(Core :: Layout: Form Controls, defect)

Description

[Anders Andersen]

User-Agent:       Mozilla/5.0 (Windows; U; Windows NT 6.1; nb-NO; rv:1.9.1.4) Gecko/20091016 Firefox/3.5.4
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 6.1; nb-NO; rv:1.9.1.4) Gecko/20091016 Firefox/3.5.4

I'm developing an AJAX application which has a 'repeating form' (like a table, where additional rows are being added as you fill out the last row. The form is based on normal form/input elements, where each row is defined as a separate form).

I wanted to make it easier for the user to see which table field he was in, so I added 'input:focus{background-color:#ff6;}' to the CSS. Now the first input field of a new row is shrunk by 2 pixels every time a new row is created. When yet another row is added, the previous one returns to its original size.

Rows are added by a Javascript which populates a <span> with a new row and inserts yet another <span>.

When researching the problem I also found what caused it. See additional info further down.

Reproducible: Always

Steps to Reproduce:
1. Create a simple <form> with one <input onblur='doJS()'> element and a <span> on the next line.
2. Create a Javascript doJS() which populates the <span> with a new <form> and <input> whenever the onblur event occurs on previous input element.
3. Create a CSS rule: input:focus{background-color:#ff6;}
4. When trying to populate the form, it should be obvious to see that every <input> element is shrunk when it has focus.
Actual Results:  
Each new table field is shrunk by 2 pixels when it has focus, as described earlier.

Expected Results:  
The new table fields should keep the size specified in their html.

I did a little research and found that Firefox's own "forms.css" has the following rule:

input {
...more here...
  padding: 1px 0 1px 0;
...and here...
}

This is what causes the problem. When I included 'padding: 1px 1px 1px 1px;' in the :focus rule, it solved the problem.

However, I feel that this is a 'hack' and shouldn't be necessary. In IE8 the rule worked as expected, even without the hack.

Comment 1

[David Baron :dbaron: (⌚️UTC-4, no longer working on Mozilla)]

Hmmm.  Stumbled across this while looking for Core bugs languishing in Firefox::General.

I don't quite follow your description (seeing a URL with the problem might help), but I think this is a combination of two things:
 * when you specify border or background styles for a form control, we drop its "native" appearance.
 * that native appearance, when present, overrides our default border/padding
 * (possibly; hard to tell from the description) bug 393325 causes relayout not to happen when it needs to, so you see it later than you should