Open
Bug 1239918
Opened 8 years ago
Updated 2 years ago
False clickable areas on linked DIV and SPAN
Categories
(Core :: Layout, defect)
Tracking
()
UNCONFIRMED
People
(Reporter: browser.tech.mailbag, Unassigned)
Details
(Keywords: testcase)
Attachments
(2 files, 1 obsolete file)
1.19 KB,
patch
|
Details | Diff | Splinter Review | |
6.70 KB,
text/plain
|
Details |
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.
Reporter | ||
Updated•8 years ago
|
Component: Untriaged → General
Keywords: html5,
reproducible
OS: Unspecified → Windows 7
Priority: -- → P5
Hardware: Unspecified → x86
Could you attach a testcase to the bug report, please.
Flags: needinfo?(browser.tech.mailbag)
Priority: P5 → --
Reporter | ||
Comment 2•8 years ago
|
||
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.)
Flags: needinfo?(browser.tech.mailbag)
Attachment #8708451 -
Attachment mime type: text/plain → text/html
Chrome 47 have the same rendering with Firefox, although IE11 don't do so.
Comment 4•8 years ago
|
||
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)
OS: Windows 7 → All
Hardware: x86 → All
Comment 5•8 years ago
|
||
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.
Flags: needinfo?(roc)
Reporter | ||
Comment 6•8 years ago
|
||
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.
Attachment #8708451 -
Attachment is obsolete: true
Reporter | ||
Updated•8 years ago
|
Summary: False clickable areas on linked DIV → False clickable areas on linked DIV and SPAN
Reporter | ||
Comment 7•8 years ago
|
||
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.
Flags: needinfo?(roc)
Updated•2 years ago
|
Severity: normal → S3
You need to log in
before you can comment on or make changes to this bug.
Description
•