1078393 - [Browser] 'Images' and 'Beta' text is cutoff in Wikipedia

Status: RESOLVED FIXED

(Web Compatibility :: Site Reports, defect)

Description

[pete siphantong [:Petes]]

Attachment: im.txt

Description: 
When user goes to settings in Wikipedia, the 'Images' and 'Beta' text is cutoff

Repro Steps:
1: Update a Flame to 20141006000205
2: Go to Browser > http://en.m.wikipedia.org/
3: Tap the drawer > Settings

Actual:
the 'Images' and 'Beta' text is cutoff

Expected:
the 'Images' and 'Beta' text is display correctly

Flame 2.1 KitKat Base (319mb)(Full Flash)

Environmental Variables:
Device: Flame 2.1
BuildID: 20141006000205
Gaia: 778ebac47554e1c4b7e9a952d73e850f58123914
Gecko: c4a4b04c617c
Gonk: 2c909e821d107d414f851e267dedcd7aae2cebf
Version: 34.0a2 (2.1)
Firmware: V180
User Agent: Mozilla/5.0 (Mobile; rv:34.0) Gecko/34.0 Firefox/34.0


Repro frequency: 100%
See attached: logcat
Screenshot attached

Comment 1

[pete siphantong [:Petes]]

Attachment: 2014-10-06-12-45-31.png

Comment 2

[pete siphantong [:Petes]]

Link to failed test case: https://moztrap.mozilla.org/manage/case/2534/

This issue also reproduce on the Flame 2.2 KitKat Base (319mb), and the Flame 2.0 KitKat Base (319mb). The 'Images' and 'Beta' text is cutoff


Flame 2.2 KitKat Base (319mb)(Full Flash)

Environmental Variables:
Device: Flame 2.2 Master
BuildID: 20141006040204
Gaia: 470826d13ae130a5c3d572d1029e595105485fb0
Gecko: e0d714f43edc
Gonk: 2c909e821d107d414f851e267dedcd7aae2cebf
Version: 35.0a1 (2.2 Master)
Firmware: V180
User Agent: Mozilla/5.0 (Mobile; rv:35.0) Gecko/35.0 Firefox/35.0



Flame 2.0 KitKat Base (319mb)(Full Flash)

Environmental Variables:
Device: Flame 2.0
BuildID: 20141006000202
Gaia: 092d2b7678774c8b0b06dca0e0a8119e9eafdec3
Gecko: 69ca61f7edf3
Gonk: 2c909e821d107d414f851e267dedcd7aae2cebf
Version: 32.0 (2.0)
Firmware: V180
User Agent: Mozilla/5.0 (Mobile; rv:32.0) Gecko/32.0 Firefox/32.0

Comment 3

[Mike Taylor [:miketaylr]]

Also reproduces in Fennec.

Comment 4

[Mike Taylor [:miketaylr]]

They're doing some interesting stuff with pseudo-elements and generated content to create custom checkboxes:

.mw-ui-checkbox:not(#noop) input[type="checkbox"]:checked + label:before {
    background-image: linear-gradient(transparent, transparent), url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjI0IiBoZWlnaHQ9IjI0Ij48cGF0aCBkPSJNNCAxMmw1IDUgMTEtMTIiIHN0cm9rZT0iIzAwQjc4QyIgc3Ryb2tlLXdpZHRoPSIzIiBmaWxsPSJub25lIi8+PC9zdmc+");
    background-size: 1.6em 1.6em;
    background-repeat: no-repeat;
    background-position: center top;
}
.mw-ui-checkbox:not(#noop) input[type="checkbox"] + label:before {
    content: "";
    position: absolute;
    left: 0px;
    display: inline-block;
    border-radius: 2px;
    margin-right: 13px;
    width: 1.6em;
    height: 1.6em;
    background-color: #FFF;
    border: 1px solid #808080;
}

Tweaking margin-right of .mw-ui-checkbox:not(#noop) input[type="checkbox"] + label {} will allow them to make sure the label clears the pseudoelements.

Comment 5

[Karl Dubost💡 :karlcow]

Related
http://git.wikimedia.org/search/?s=mw-ui-checkbox&r=mediawiki/core.git&st=COMMIT

So I guess someone who is involved with Wikipedia could fix it.
http://git.wikimedia.org/blob/mediawiki%2Fcore.git/HEAD/resources%2Fsrc%2Fmediawiki.ui%2Fcomponents%2Fcheckbox.less#L29

Let's check the history
http://git.wikimedia.org/history/mediawiki%2Fcore.git/HEAD/resources%2Fsrc%2Fmediawiki.ui%2Fcomponents%2Fcheckbox.less

jdlrobson seems the person involved.
https://github.com/jdlrobson

Hi Jon,
Could you help us to fix it?

Thanks.

Comment 6

[Jon Robson]

Hey guys!
Yeh I took a look and I can confirm the issue.
The problem is caused by the width not applying to checkboxes.
Basically what we are doing is hiding the checkbox using opacity: 0 and then creating a pseudo element over the top of it (since checkboxes are notoriously difficult to style) - see more on the checkbox hack here [1]

On various browsers 
input[type="checkbox"] {
	width: 100px;
}
will make the checkbox stretched. Chrome and Safari and desktop Firefox obey this rule but it seems Firefox OS doesn't.

Is this therefore a bug in Firefox OS or is this by design?
I created a bug our end too https://bugzilla.wikimedia.org/show_bug.cgi?id=71750

[1] http://tympanus.net/codrops/2012/09/13/button-switches-with-checkboxes-and-css3-fanciness/

Comment 7

[Derek Harris [:DerekH] - Dont need info. Last day 6/5/15]

not nominating to block, as this is a tech evangelism bug

Comment 8

[Mike Taylor [:miketaylr]]

Hi Jon,

Thanks for nice explanation of the actual issue. Note that this isn't just a Firefox OS issue, it's also visible in Firefox for Android. You can see https://miketaylr.com/bzla/1078393.html as small test case--Desktop indeed will allow you to set the width of a checkbox (with or without -moz-appearance: none).

Desktop's forms.css[1] has the following for checkboxes (ignoring all other rules):

input[type="checkbox"] {
  width: 13px;
}

Firefox OS [2] and Firefox for Android [3] add the following in content.css:
input[type="checkbox"] {
  max-width: 14px;
}

I wonder if we really need this max-width--seems like Chrome Mobile is able to exist on the mobile web just fine without it.

[1] http://mxr.mozilla.org/mozilla-central/source/layout/style/forms.css
[2] http://mxr.mozilla.org/mozilla-central/source/b2g/chrome/content/content.css
[3] http://mxr.mozilla.org/mozilla-central/source/mobile/android/themes/core/content.css

Comment 9

[Mike Taylor [:miketaylr]]

In any case, there isn't !important set on the max-width in content.css, so you should be able to tweak it that way.

Comment 10

[Mike Taylor [:miketaylr]]

A patch landed to fix this at Wikimedia, so presumably once the site receives an update this should be fixed: https://bugzilla.wikimedia.org/show_bug.cgi?id=71750

Comment 11

[Jon Robson]

Have you got a bug for re-reviewing the max-width property? As you state in #c8 other browsers omit this property.

Wikipedia should receive an update around 23rd (Sadly the fix got merged after branch was cut and the deployments are not that regular sadly!).

Comment 12

[Mike Taylor [:miketaylr]]

I haven't yet--will file today (was traveling for a conf since last week) and link it here.

Comment 13

[Mike Taylor [:miketaylr]]

This is fixed now (probably has been for a while).

Comment 14

[Jon Robson]

Great! Thanks all!