All users were logged out of Bugzilla on October 13th, 2018

"Vote" buttons at "The Net Awards" are mostly non-clickable in Firefox (at least on Linux), due to use of restyled radio buttons

NEW
Unassigned

Status

()

6 years ago
6 years ago

People

(Reporter: dholbert, Unassigned, NeedInfo)

Tracking

Trunk
All
Linux
Points:
---

Firefox Tracking Flags

(Not tracked)

Details

(URL)

(Reporter)

Description

6 years ago
STR:
 1. Visit http://www.thenetawards.com/
 2. Click any of the blue category-headings (e.g. Game Changer of the Year)
 3. Hover / try to click any of the "Vote" buttons (e.g. "Popcorn Maker")

EXPECTED RESULTS: "Vote" button should be clickable.

ACTUAL RESULTS: Most of the "Vote" button (including the word "Vote" itself) is non-clickable, and my mouse cursor is a text-selection cursor, instead of a the button-clicker "finger" cursor.

ANALYSIS: "Inspect Element" shows that each Vote button is actually a <span> w/ display:inline-block and a background image, and it contains an invisible radio button for click-handling:
  <input type="radio" style="opacity: 0;"></input>
The radio button is styled (via external stylesheets) to have the same height and width as its container, but we appear to ignore that styling, possibly because it's a native widget with a mandated frame-size.  (at least, on linux)
(Reporter)

Comment 1

6 years ago
I can reproduce this on Linux with Nightly and Release firefox, BTW.

Reduced testcase, demonstrating what's going on (w/ exaggerated sizing):
 data:text/html,<input type="radio" style="width: 400px; height: 400px">

If that renders as a huge radio button, then the vote buttons will work. If it's tiny, they'll be broken.  (It's tiny for me.)
Summary: "Vote" buttons at "The Net Awards" are non-functional in Firefox, due to use of restyled radio buttons → "Vote" buttons at "The Net Awards" are non-functional in Firefox (at least on Linux), due to use of restyled radio buttons
(Reporter)

Comment 2

6 years ago
Adding "-moz-appearance: none" fixes the issue, BTW. Maybe this is a tech evang issue, and we should ask them to add that?
(Reporter)

Comment 3

6 years ago
(In reply to Daniel Holbert [:dholbert] from comment #1)
> I can reproduce this on Linux with Nightly and Release firefox, BTW.

UA strings for completeness:
 Mozilla/5.0 (X11; Linux x86_64; rv:22.0) Gecko/20130320 Firefox/22.0
 Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:19.0) Gecko/20100101 Firefox/19.0

In my Google Chrome browser (dev channel), this works as-intended -- the buttons are functional (and the data URI in comment 1 renders as a huge button):
 Version 27.0.1444.3 dev
(Reporter)

Updated

6 years ago
Summary: "Vote" buttons at "The Net Awards" are non-functional in Firefox (at least on Linux), due to use of restyled radio buttons → "Vote" buttons at "The Net Awards" are mostly non-clickable in Firefox (at least on Linux), due to use of restyled radio buttons
Pretty sure this has come up before for radios in particular...
Flags: needinfo?(dbaron)
You need to log in before you can comment on or make changes to this bug.