1262772 - In in-content pages, HTML input type="checkbox" elements invisibly cover the top-left of their visible representation because they still take pointer events (despite opacity: 0)

Status: RESOLVED FIXED

(Firefox :: Theme, defect)

Description

[johngraciliano]

User Agent: Mozilla/5.0 (Windows NT 6.2; WOW64; rv:45.0) Gecko/20100101 Firefox/45.0
Build ID: 20160315153207

Steps to reproduce:

(Tested under Windows 8) In Firefox 47.0a2, open about:networking to see the warning page (needs 'network.warnOnAboutNetworking = true' in about:config).
Hover the pointer inside the checkbox between the center and the top left corner.





Actual results:

The highlight for the checkbox disappears while hovering in the box area.


Expected results:

The highlight should not disappear.

This problem also affects the checkbox in the network error page 'Secure Connection Failed' (triggered when I try to open https://majorgeeks.com ).  I tested on Windows 8 with other versions of Firefox.  I found the problem is in versions 46.0 (tested beta 5 and beta 8) and 48.0a1 (yet not in 45.0.1).  Perhaps the versions should be 'trunk.'

Comment 1

[johngraciliano]

In chrome://global/skin/in-content/common.css the rule set for checkboxes and radio buttons to hide the actual checkbox
  html|input[type="checkbox"] {
    opacity: 0;
    width: 0;
    position: absolute;
  }
may simply render the box invisible but leave it on top of the label it preceeds, more precisely covering the content inserted before it to represent the checkbox (or perhaps placed on top of something else!).  Firefox 45.0.1 solves the problem replacing the code by:
  html|input[type="checkbox"] {
    visibility: hidden;
    position: absolute;
  }

Comment 2

[johngraciliano]

I verified the problem also affects (but not so notably) the 'Autorefresh every 3 seconds' checkbox in about:networking.

Comment 3

[Loic]

Tim, could you check if you have some time, please.

Comment 4

[Loic]

This issue is particularly visible now with the new design of the warning page of about:networking.

Comment 5

[:Gijs (he/him)]

I regressed this in bug 1243353, apparently.

(In reply to johngraciliano from comment #1)
> In chrome://global/skin/in-content/common.css the rule set for checkboxes
> and radio buttons to hide the actual checkbox
>   html|input[type="checkbox"] {
>     opacity: 0;
>     width: 0;
>     position: absolute;
>   }
> may simply render the box invisible but leave it on top of the label it
> preceeds, more precisely covering the content inserted before it to
> represent the checkbox (or perhaps placed on top of something else!). 
> Firefox 45.0.1 solves the problem replacing the code by:
>   html|input[type="checkbox"] {
>     visibility: hidden;
>     position: absolute;
>   }

As evidenced in bug 1243353, that means you can't focus the checkbox with the keyboard.

We can fix this by also setting pointer-events: none.

Comment 6

[:Gijs (he/him)]

Attachment: MozReview Request: Bug 1262772 - html checkboxes in in-content pages should stop taking pointer events because they're hidden, r?jaws

Review commit: https://reviewboard.mozilla.org/r/44991/diff/#index_header
See other reviews: https://reviewboard.mozilla.org/r/44991/

Comment 7

[johngraciliano]

If you do not want to hide the checkbox, an alternative solution is to simply add the setting:
  z-index = -1
That also solves the problem without hiding the box (leave the other property settings too).

Comment 8

[johngraciliano]

I should have written:
  z-index: -1;

Comment 9

[Jared Wein [:jaws] (please needinfo? me)]

Comment on attachment 8738962 [details]
MozReview Request: Bug 1262772 - html checkboxes in in-content pages should stop taking pointer events because they're hidden, r?jaws

https://reviewboard.mozilla.org/r/44991/#review42039

I don't see any other uses of `z-index: -1` in our codebase, so let's move forward with the `pointer-events: none;` rule as it is more obvious by name what its intention is.

Comment 10

[Pulsebot]

https://hg.mozilla.org/integration/mozilla-inbound/rev/890bb7f1858f

Comment 11

[Wes Kocher (:KWierso) (Not reading bugmail; email directly if needed)]

https://hg.mozilla.org/mozilla-central/rev/890bb7f1858f

Comment 12

[:Gijs (he/him)]

Comment on attachment 8738962 [details]
MozReview Request: Bug 1262772 - html checkboxes in in-content pages should stop taking pointer events because they're hidden, r?jaws

Approval Request Comment
[Feature/regressing bug #]: bug 1243353
[User impact if declined]: small area of HTML in-content checkboxes is not clickable/hoverable
[Describe test coverage new/current, TreeHerder]: no, CSS-only patch
[Risks and why]: reasonably low... one line patch, only removes mouse event handling from the invisible element that's blocking the click/hover from going through to where we want it to
[String/UUID change made/needed]: no.

Comment 13

[Liz Henry (:lizzard) (relman/hg->git project)]

Recent regression, messes up keyboard navigation, tracking

Comment 14

[Liz Henry (:lizzard) (relman/hg->git project)]

Comment on attachment 8738962 [details]
MozReview Request: Bug 1262772 - html checkboxes in in-content pages should stop taking pointer events because they're hidden, r?jaws

Fix for minor regression in in-content pages. 
OK to uplift to aurora and beta. This should be fixed in 46 beta 11.

Comment 15

[Carsten Book [:Tomcat]]

https://hg.mozilla.org/releases/mozilla-aurora/rev/10dae46aa232

Comment 16

[Carsten Book [:Tomcat]]

https://hg.mozilla.org/releases/mozilla-beta/rev/ca1ca30437bc