836698 - Unexpected line wrapping when hovering link at w3.org (w/ 2px of margin being swapped for 1px of padding & 1px of border, which shouldn't affect layout)

Status: NEW

(Core :: Layout: Block and Inline, defect)

Description

[Smylers]

User Agent: Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:19.0) Gecko/20100101 Firefox/19.0
Build ID: 20130125235454

Steps to reproduce:

I viewed the W3C HTML page: http://www.w3.org/html/wg/

By chance my browser window happened to be such that the link ‘Beyond HTML5’ has ‘Beyond’ only just fitting on to the end of a line and ‘HTML5’ wrapping on to the following line.

(To reproduce: resize your browser window such that all of ‘Beyond HTML5’ wraps to have a line-break just before it, then make it 1 pixel wider such that ‘Beyond’ is now at the end of the previous line.)

Then I placed the mouse pointer over the ‘B’ of ‘Beyond’, putting the link in the :hover state.


Actual results:

The hovering made all of ‘Beyond’ wrap to the following line as well. At which point it was no longer under the mouse pointer, so it came out of the :hover state. That made it return to its original position, under the mouse pointer. Which put it back in the :hover state, which moved it to the next line, and so on ...

It stays in an infinite loop, flashing every half second or so between the two states and two positions. As well as being visually irritating, this of course makes it impossible to click on the link.


Expected results:

Hovering over the link should have left it where it was.

The CSS for the unhovered link is:

  a
  {
    margin: 0px 2px;
    padding: 1px;
  }

and for hovered:

  #content a:hover
  {
    border: 1px dotted rgb(0, 0, 0);
    padding: 1px 2px;
    margin: 0px;
  }

Note that in both cases the horizontal margin plus border plus padding adds up to 3px, so I think the element width and position should be the same in both states.

Note this only happens with the window 1px or 2px narrower than the width that causes all of the link to wrap on to the following line. If it's 3px smaller then the link stays split between the two lines when hovered-over.

Using the style editor to change the unhovered CSS to:

  a
  {
    margin: 0px 0px;
    padding: 1px 3px;
  }

avoids the issue: the link then all displays at the start of the following line even when not hovered.

So it looks like 3px of padding makes the element 1px wider than 3px of margin does.

Comment 1

[Loic]

Yes, I see it with FF18 on Win 7 in this configuration: http://i.imgur.com/y1B4uMh.jpg

Comment 2

[(mostly gone) XtC4UaLL [:xtc4uall]]

I can see the Issue back with testing against Mozilla/5.0 (Windows; U; Windows NT 6.1; en-US; rv:1.9.2.28) Gecko/20120306 Firefox/3.6.28 ID:20120306064154 (didn't check earlier).
Probably already filed.

Comment 3

[Daniel Holbert [:dholbert]]

I can repro w/ STR in Nightly:
  Mozilla/5.0 (X11; Linux x86_64; rv:21.0) Gecko/20130131 Firefox/21.0
[Clarifying summary.]

I tested in an old build (Firefox 7.0), too, and I can reproduce this there, so this isn't a recent regression.

Looks related to bug 666328, though not necessarily a dupe (since that bug doesn't have any visible layout changes).

Comment 4

[Alice0775 White]

Not flicker, but whole text move to the next line when mouse over the text:
Mozilla/5.0 (Windows; U; Windows NT 6.1; en-US; rv:1.9a1) Gecko/20050925 Firefox/1.6a1
Flicker:
Mozilla/5.0 (Windows; U; Windows NT 6.1; en-US; rv:1.9a1) Gecko/20050926 Firefox/1.6a1

Bonsai log:
http://bonsai.mozilla.org/cvsquery.cgi?treeid=default&module=all&branch=HEAD&branchtype=match&dir=&file=&filetype=match&who=&whotype=match&sortby=Date&hours=2&date=explicit&mindate=2005-09-25+00%3A00%3A00&maxdate=2005-09-26+05%3A00%3A00&cvsroot=%2Fcvsroot

triggered by: Bug 92217

Comment 5

[Smylers]

Original page has changed, but the bug can still be reproduced on this archive of it:
http://web.archive.org/web/20130127135931/http://www.w3.org/html/wg/

Comment 6

[Smylers]

This bug still exists on that Wayback Machine page, but the errant behaviour is now slightly different for me in Firefox 106 than it was in Firefox 19 when this was reported. However it's still the case that the link is impossible to click from there.

• Mostly when moving the pointer over ‘Beyond’, the pointer initially stays in the arrow shape (non-clickable, non-text), with the ‘Beyond’ staying where it was.
• In this state, clicking on ‘Beyond’ makes it toggle down to the following line, briefly updating the styling and pointer shape appropriately for a link, and then immediately toggles back.
• After about 2 seconds, ‘Beyond’ suddenly flips to the following line, the pointer changes to the hand, and all of ‘Beyond HTML5’ is highlighted according to the CSS :hover rules. The link destination then pops up at the bottom — but clicking still doesn't activate the link.
• Sometimes if I start by first hovering over, and highlighting, ‘Decisions’ to the left of ‘Beyond’, then moving the pointer right, then ‘Beyond’ wraps down to the second line immediately.

So the flashing is gone, but the link still doesn't work.