421700 - Layout regression : text is below text area rather than next to it

Status: RESOLVED WORKSFORME

(Tech Evangelism Graveyard :: English Other, defect, P2)

Description

[Steve England [:stevee]]

Attachment: Image showing layout regression

Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.9b5pre) Gecko/2008030806 Minefield/3.0b5pre ID:2008030806

Kernel Sanders noticed this over at the mz forums.

1. New profile, start firefox
2. Visit https://www.national-lottery.co.uk/player/user/login.do

Expected:
- "Username:" text is positioned to the left of the username text box

Actual:
- "Username:" text is positioned below and to the left of the username text box.

Works: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.9a2pre) Gecko/2007020611 Minefield/3.0a2pre

Broken: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.9a3pre) Gecko/2007020702 Minefield/3.0a3pre

Checkins to module PhoenixTinderbox between 2007-02-06 10:00 and 2007-02-07 03:00 :
http://bonsai.mozilla.org/cvsquery.cgi?treeid=default&module=PhoenixTinderbox&branch=HEAD&branchtype=match&dir=&file=&filetype=match&who=&whotype=match&sortby=Date&hours=2&date=explicit&mindate=2007-02-06+10&maxdate=2007-02-07+03&cvsroot=%2Fcvsroot

Due to bug 177805 i guess (unless the site's sniffing for Minefield/3.0a2pre and not Minefield/3.0a3pre or something)

Comment 1

[Steve England [:stevee]]

Attachment: testcase to show problem

Expected: "* Username:" should appear vertically high next to the text entry.
Actual: "* Username:" appears vertically lower than it used to.

Comment 2

[Steve England [:stevee]]

Hmm, the above testcase doesn't appear to work for me unless I save it and load it locally. (aside: why does that happen?)

Comment 3

[Brian Polidoro]

Could it be your zoom level is different?  I see the same behavior with the testcase locally or here.

Comment 4

[Steve England [:stevee]]

Duh me - thanks Brian :)

Comment 5

[Robert O'Callahan (:roc) (email my personal email if necessary)]

I don't see this on Mac

Comment 6

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

Does whether or not this shows up vary by zoom level?

Comment 7

[Steve England [:stevee]]

(In reply to comment #6)
> Does whether or not this shows up vary by zoom level?

Yes, and maybe other things too (resolution, dpi, etc)

Comment 8

[Daniel Holbert [:dholbert]]

(In reply to comment #5)
> I don't see this on Mac

I don't see this on Linux, either. Looks like this is Windows-only.

Comment 9

[Boris Zbarsky [:bzbarsky]]

It likely depends on the exact font metrics, right?  The question is whether the text "* Username:" at an 11px font size in the Verdana font or whatever "verdana, sans-serif" resolves to on your system has a width that's greater than 7.45em or not.

I can see that changing for all sorts of reasons since 1.8, since we generally changed text measurement stuff...

Steve, how much do you have to tweak the "6.3em" width to get things to render like they used to in your setup?  What zoom level are you using?

Comment 10

[Steve England [:stevee]]

Zoom level is the default level that comes with a new profile or after an CTRL+0

Setting the label width: 6.303787469863em still shows the problem; setting width: 6.303787469864em and the rendering looks like it used to. (I hope 12 decimal places is enough..)

Comment 11

[Boris Zbarsky [:bzbarsky]]

Certainly enough!  Even 6.304 would have been fine.  ;)

  0.004 * 11 * 60 = 2.64 or so app units in the new world

At 96 dpi (which is what I assume you're using, on Windows),

  0.004 * 11 * 1/96 * 72 * 20 = 0.66 twips in the old world.

So it's quite possible that the width set is in fact not quite enough but that rounding to integer twips (in the old world) increased it so the text fit.  Since the new-world units are smaller than twips, rounding may not increase the width nearly as much, or may even decrease it where it used to increase it.

Here's a simple testcase without text involved that shows the effect:

data:text/html,<div style="width: 100.966666667px"><div style="float:left; width: 50.5px; height: 20px; background:green"></div><div style="float:left; width: 50.483333333333px; height: 20px; background:green"></div>

Note that the sum of the widths of the two floats is greater than the width of the div.  On branch, the width of the outer div is 1514.75 twips, which gets rounded to 1515 twips.  The width of the first float is 757.5 twips (rounded to 758) and the width of the second float is 757.25 (rounded to 757).  757 + 758 == 1515, so the floats fit next to each other (which is what I see on branch).

On trunk, the width of the outer div is 6058 app units.  The widths of the two floats are 3030 and 3029 app units respectively.  The sum if 6059, so the floats don't fit (which is what I see on trunk on this testcase).

Comment 12

[Robert O'Callahan (:roc) (email my personal email if necessary)]

Taking off the blocking list since it seems to be a site problem. Someone should either close this or change it to evangelism.

Comment 13

[klonos]

Still seeing this on Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.9.2a1pre) Gecko/20090420 Minefield/3.6a1pre (.NET CLR 3.5.30729) ID:20090420041629

...also similar issue on IE8, but there text is aligned above text area not below. Site problem as Robert suggests?

Comment 14

[Boris Zbarsky [:bzbarsky]]

Yeah, this is evangelism.

Comment 15

[sjw]

URL is obsolete.