1239918 - False clickable areas on linked DIV and SPAN

Status: UNCONFIRMED

(Core :: Layout, defect)

Description

[browser.tech.mailbag]

User Agent: Mozilla/5.0 (Windows NT 6.1; rv:43.0) Gecko/20100101 Firefox/43.0
Build ID: 20151216175450

Steps to reproduce:

Made a linked DIV <a><div></div></a>


<div style="
margin: 50px 0px; width: 500px; background: lightyellow; font: 16px serif;
">

Below is a linked, BLOCK DIV with 50px margins. The space to the left and right are clickable, with or 

without margins- Yikes!<br>
<a href="#"><div style="
display: block;
margin: 50px;
width: 250px; height: 100px; background: green; border: 5px solid darkgreen;
">
</div></a>
<br><br>

</div>



<div style="
margin: 50px 0px; width: 500px; background: lightyellow; font: 16px serif;
">

Below is a linked, INLINE DIV with 50px margins. The empty line on which it sets is clickable- Yikes!<br>
This is a
<a href="#"><div style="
display: inline-block;
NOTmargin: 50px;
width: 250px; height: 100px; background: green; border: 5px solid darkgreen;
">
</div></a>
single line of text.<br><br>

</div>


Actual results:

False clickable areas around the linked DIV are apparent. If display is block, empty space to the right and left is clickable. If display is inline, the line on which the DIV sets is clickable, (easiest to notice with a bottom margin set).



Expected results:

These areas should not be clickable.

Comment 1

[Loic]

Could you attach a testcase to the bug report, please.

Comment 2

[browser.tech.mailbag]

Attachment: Testcase; HTML handled incorectly in Firefox

Mouse over the areas described- you will see the cursor change to a link pointer in Firefox. These areas should NOT be clickable. (IE11 does not exhibit this behavior.)

Comment 3

[YF (Yang)]

Chrome 47 have the same rendering with Firefox, although IE11 don't do so.

Comment 4

[Mats Palmgren (inactive)]

The block-in-inline case seems like a bug to me.  I don't think we should catch events
for areas outside of what getClientRects() returns for the elements involved.

The behavior for the inline-in-inline case seems correct though.  The <a> actually
covers the empty gap in the line there.  (add "a { background:red; }" to see it)

Comment 5

[Mats Palmgren (inactive)]

Attachment: wip

This fixes the testcase for me locally (not tested more than that so far).

This is roughly what getClientRects() does here:
http://hg.mozilla.org/mozilla-central/annotate/5644818538de/layout/base/nsLayoutUtils.cpp#l3558

nsTableOuterFrame is fine because it doesn't generate any display items for itself:
http://hg.mozilla.org/mozilla-central/annotate/5644818538de/layout/tables/nsTableOuterFrame.cpp#l174

roc, do you agree this is a bug that we should fix?
(it makes us incompatible with Chrome but compatible with IE)
I think IE's behavior makes more sense, and making hit-testing
correspond to the getClientRects() areas seems like a good thing.

Comment 6

[browser.tech.mailbag]

Attachment: False clickable areas on linked DIV and SPAN

I've attached some better examples of what's going on.

I think the clickable areas to the left and right of the element is NOT correct behavior.

The clickable text-line immediately *blow* the element might be correct behavior according to convoluted CSS specifications, (if we imagine that an anchor tag is surrounding a text-line even when no text exists).

However, each of these behaviors are being exhibited within the same element.

Comment 7

[browser.tech.mailbag]

Does my last set of examples make sense? Is any more information needed?

There are several issues going on here:

1.) Clickable left/ right empty space on a regular DIV.
2.) Clickable left/ right margins on a regular DIV.
3.) Clickable left/ right margins on a SPAN element.
4.) Clickable left/ right margins over the text-line of an INLINE DIV.
5.) Clickable text-line occupied by a linked INLINE DIV.

I think that margins should NEVER be clickable or hover-able. The text-line in Case 5 also appears to be incorrect behavior, but might have something to do with a poorly defined CSS specification.

Unlike Firefox, Internet Explorer exhibits none of these behaviors on click. Oddly, IE *does* exhibit a similar behavior in Cases 5 thru 4 on *hover* only, but not when the mouse is over the margins or text-line.