Last modified: 2014-10-17 17:26:06 UTC
Created attachment 16692 [details] 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
Prioritization and scheduling of this bug is tracked on Trello card https://trello.com/c/K1RV5y2Z
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...
:) 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 :)
