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

Status: RESOLVED WORKSFORME

(Core :: Layout, defect)

Description

[Daniel Holbert [:dholbert]]

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)

Comment 1

[Daniel Holbert [:dholbert]]

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.)

Comment 2

[Daniel Holbert [:dholbert]]

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

Comment 3

[Daniel Holbert [:dholbert]]

(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

Comment 4

[Boris Zbarsky [:bzbarsky]]

Pretty sure this has come up before for radios in particular...

Comment 5

[Emilio Cobos Álvarez (:emilio)]

This was fixed by the non-native theme.