Bug 27656 – REGRESSION: Clicking on popup menu changes layout

• Component: Layout and Rendering
• Status: RESOLVED FIXED

[Ton Voon]

Created attachment 33451 [details]
Reduced HTML showing problem

Hi!

I have a problem on our web application which uses table-less forms.

If you press the popup menu button, the layout changes. Specifically, the floating label on the left hand side becomes indented.

This is fully reproduceable. Tests on Safari 3, FF 3.0.12 and FF 3.5 and IE6 show no such problem.

This occurs in Safari 4.0.2 and the latest nightly build (WebKit r46282).

I've attached a reduced HTML file. I've also attached a movie demonstrating the problem.

If I change the label.fields padding-bottom to 3px, then the problem disappears. However, I suspect this is still bad behaviour on Webkit as the initial layout is correct.

Ton

[Ton Voon]

Created attachment 33452 [details]
Movie of problem

[Alexey Proskuryakov]

<rdar://problem/7092213>

[Simon Fraser (smfr)]

It's focus, not clicking that is the issue; the focus ring is affecting layout.

[Ton Voon]

(In reply to comment #3)
> It's focus, not clicking that is the issue; the focus ring is affecting layout.

I don't think it is the focus ring (unless there is something happening in the background). If I add this to the CSS:

input[type=text]:focus, input[type=password]:focus, textarea:focus, select:focus {
  outline: 0 none;
}

This removes the blue ring, but the layout still changes on click.

[Ton Voon]

A comment at doctype.com (http://doctype.com/questions/whats-best-way-overcome-safari-4-bug-css-tableless-form) suggests that a partial redraw could be occuring which is missing the <br> tag from the field prior to the popup.

This appears to be correct when I run Quartz Debug. On Safari 3, the redraw flash appears over the previous text box, the popup and the button, whereas in webkit nightly, the redraw flashes for the popup and the button.

It seems to me like the previous <br> tag is not considered for redrawing the layout on the popup click, hence missing the clear:left and the label floats are then aligned together.

[Alexey Proskuryakov]

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

[Robert Hogan]

I cannot recreate this on Chromium20. I can however recreate bug 53387 and 18939, so this seems to be a different issue that is resolved.

[Robert Hogan]

This is no longer reproducible on trunk so I'm closing it.