Closed Bug 1262772 Opened 4 years ago Closed 4 years ago

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)

Categories

(Firefox :: Theme, defect)

46 Branch
x86_64
Windows 8
defect
Not set

Tracking

()

RESOLVED FIXED
Firefox 48
Tracking Status
firefox45 --- unaffected
firefox46 + fixed
firefox47 + fixed
firefox48 + fixed

People

(Reporter: johngraciliano, Assigned: Gijs)

References

Details

(Keywords: regression)

Attachments

(1 file)

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.'
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;
  }
OS: Unspecified → Windows 8
Hardware: Unspecified → x86_64
I verified the problem also affects (but not so notably) the 'Autorefresh every 3 seconds' checkbox in about:networking.
Tim, could you check if you have some time, please.
Component: Untriaged → Theme
Flags: needinfo?(ntim.bugs)
This issue is particularly visible now with the new design of the warning page of about:networking.
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.
Assignee: nobody → gijskruitbosch+bugs
Blocks: 1243353
Status: UNCONFIRMED → ASSIGNED
Ever confirmed: true
Flags: needinfo?(ntim.bugs)
Keywords: regression
Summary: An invisible input box (checkbox) may cover it's visible representation → 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)
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).
I should have written:
  z-index: -1;
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.
Attachment #8738962 - Flags: review?(jaws) → review+
https://hg.mozilla.org/mozilla-central/rev/890bb7f1858f
Status: ASSIGNED → RESOLVED
Closed: 4 years ago
Resolution: --- → FIXED
Target Milestone: --- → Firefox 48
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.
Attachment #8738962 - Flags: approval-mozilla-beta?
Attachment #8738962 - Flags: approval-mozilla-aurora?
Recent regression, messes up keyboard navigation, tracking
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.
Attachment #8738962 - Flags: approval-mozilla-beta?
Attachment #8738962 - Flags: approval-mozilla-beta+
Attachment #8738962 - Flags: approval-mozilla-aurora?
Attachment #8738962 - Flags: approval-mozilla-aurora+
You need to log in before you can comment on or make changes to this bug.