1248975 - -webkit-appearance support breaks checkbox styling on captaintrain.com

Status: RESOLVED DUPLICATE of bug 1249134

(Core :: CSS Parsing and Computation, defect)

Description

[Pierre de La Morinerie]

Attachment: Checkbox with broken styling

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.11; rv:46.0) Gecko/20100101 Firefox/46.0
Build ID: 20160216004009

Steps to reproduce:

Follow-up from bug 605985 (https://bugzilla.mozilla.org/show_bug.cgi?id=605985#c41) :

Since webkit-prefixed properties were activated on Aurora (bug 1213126), the checkboxes on www.captaintrain.com started to break.

This is because we use feature-detection to style the checkbox properly:

- With "webkit-appearance:none + custom background and border" on Webkit,
- With a custom label on other browsers.

Now that Firefox reports it support WebkitAppearance, our webapp uses the webkit-code-path – but fails to style the checkbox properly, because the borders and background are not themable on Firefox.

Steps to reproduce:

Styled checkboxes are used in several places on captaintrain.com, but most of the occurences requires a (free) account. Here is one visible without an account:

* Go to https://www.captaintrain.com/signup


Actual results:

See that checkbox uses a very basic (i.e. ugly) style. (screenshot attached)


Expected results:

The checkbox should be themed (other screenshot attached).

Comment 1

[Pierre de La Morinerie]

Attachment: Checkbox with expected styling

Comment 2

[Daniel Holbert [:dholbert]]

(Adding a few notes from poking around with devtools):
Looks like, for browsers that don't support -webkit-appearance, this site places some images behind an "opacity:0" checkbox, to get the nice custom-themed checkbox look.  And for browsers that do support -webkit-appearance, it doesn't bother with those images & (reasonably) expects to be able to style the checkbox directly. But that doesn't work right now, per bug 605985.

I've filed bug 1249134 to drop support for -webkit-appearance as an alias for the time being, and I expect that should fix this.  Thank you for reporting this issue!

Comment 3

[Daniel Holbert [:dholbert]]

Based on local testing with latest Nightly, this appears to have been fixed by my patch in bug 1249134 (dropping -webkit-appearance support for the moment).  Marking as a dupe to close this out.

Thanks again for bringing this issue to our attention!