502527 - CSS :hover does not work on :before { content: "text"} when changing display: inline; to block

Status: RESOLVED DUPLICATE of bug 503813

(Core :: Layout, defect)

Description

[Cacycle]

User-Agent:       Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8.1.12) Gecko/20080201 Firefox/2.0.0.12
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.9.2a1pre) Gecko/20090705 Minefield/3.6a1pre (.NET CLR 3.5.30729)

I have a span and use the CSS selector :before to precede it with a text:

  span:before { content: "Before-"; }

I then use :hover to change this span upon hovering over the before text:

  span:hover { display: block; color: blue; }

This works fine in Firefox < 3.5 and Google Chrome. It is broken in Firefox 3.5 and Minefield 3.6a1pre.

It works as expected if I do not change the display, change it to the current default display class, or change a block element to inline.

It also breaks if I use the before-hovering to change an element contained inside the element. Again, only when changing the inside element from the default inline to block:

  span:hover > b { display: block; color: blue; }

This bug breaks the edit area reference hiding in the Wikipedia editor gadget wikEd (see http://en.wikipedia.org/wiki/User:Cacycle/wikEd).

Please see the attached testcase / testbed.

Reproducible: Always

Comment 1

[Cacycle]

Attachment: Testcase

Comment 2

[Kyle Huey (Exited; not receiving bugmail, old account, do not use)]

Confirmed on Mozilla/5.0 (Windows; U; Windows NT 6.0; en-US; rv:1.9.1) Gecko/20090624 Firefox/3.5 (.NET CLR 3.5.30729)

Comment 3

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

My guess would be that the behavior changed when bug 302561 landed; I'm not sure whether it's a bug.

Comment 4

[philippe (part-time)]

fwiw, Safari 4 and the latest Webkit nightlies behave the same as Gecko 1.9.1+

Comment 5

[Cacycle]

I see it as a bug because:

1. It is the only way to realize tab-like effects with CSS where the tab is not in the DOM (this is for the edit area of a rich text editor)
2. It is only one of four related transitions that does not work (span to block)
3. There is this strange inheritance where a span to block change deep in the hierarchy breaks the rule
4. The display change breaks the whole CSS rule set (i.e. in the testcase, the color change in the same rule set does not get applied)

This looks like a really selective erratic behavior to me. Even if this is somehow related to the anti-flicker workaround it should be fixed or, alternatively, this behavior should be clearly stated and explained.

Comment 6

[Kyle Huey (Exited; not receiving bugmail, old account, do not use)]

I still see this on trunk.

Comment 7

[Cacycle]

Testcase works correctly under 3.7a1pre (Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.9.3a1pre) Gecko/20090927 Minefield/3.7a1pre (.NET CLR 3.5.30729))

Comment 8

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

Maybe duplicate of bug 503813, then?  Was it fixed at the same time.

Comment 9

[philippe (part-time)]

The testcase started working between these two changesets:
http://hg.mozilla.org/mozilla-central/pushloghtml?fromchange=75af94f85a98&tochange=3cab7a0c2c3d
That includes the patch in bug 503813.

Duping.

Comment 10

[Michael Ryan]

Confirming that the patch from bug 503813 is what fixed this issue.