Page MenuHomePhabricator

Checkboxes do not work in Firefox OS (Special:MobileOptions)
Closed, ResolvedPublic

Description

Overlap

Visiting Special:MobileOptions on a Firefox OS device you'll notice that the labels overlap the checkboxes.

The issue seems to be because the width does not apply to the invisible (opacity:0) input[type=checkbox] and as a result it doesn't make enough room for the pseudo element.

Confirmed in the Firefox OS developer preview phone we have in the office.
See also: https://bugzilla.mozilla.org/show_bug.cgi?id=1078393


Version: unspecified
Severity: normal

Attached:

2014-10-06-12-45-31.png (854×480 px, 51 KB)

Details

Reference
bz71750

Event Timeline

bzimport raised the priority of this task from to Needs Triage.Nov 22 2014, 3:51 AM
bzimport set Reference to bz71750.
bzimport added a subscriber: Unknown Object (MLST).

bingle-admin wrote:

Prioritization and scheduling of this bug is tracked on Trello card https://trello.com/c/K1RV5y2Z

miket wrote:

Hi! I wrote a blog post about this issue at https://miketaylr.com/posts/2014/10/max-width-in-firefox-mobile-browser-checkboxes.html. It seems like override the UA stylesheet's max-width should be enough to solve the problem for Firefox OS and Firefox for Android users.

Change 165530 had a related patch set uploaded by Jdlrobson:
Optimise checkboxes for Firefox mobile

https://gerrit.wikimedia.org/r/165530

Thanks for the write up Mike! I've written a patch our end ^ to work around the problem in the meantime.

Let me know if we can help Mozilla out in future with any other wiki related bugs!

Change 165530 merged by jenkins-bot:
Optimise checkboxes for Firefox mobile

https://gerrit.wikimedia.org/r/165530

  • Bug 72189 has been marked as a duplicate of this bug. ***

Thanks for the fix, Jon!

In such cases I always wonder which HTML engine has The Right Standard Behavior...

miket wrote:

:) In this case, I think it we were in the wrong.

I landed the following patches for Firefox for Android and Firefox OS, so future versions won't need this workaround:

https://hg.mozilla.org/mozilla-central/rev/2316f7e0b196
https://hg.mozilla.org/mozilla-central/rev/9cdce80d5092

Awesome! Thank you very much. I love little collaborations of this kind :)