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

RESOLVED FIXED

Status

Tech Evangelism
Mobile
RESOLVED FIXED
3 years ago
2 years ago

People

(Reporter: Petes, Assigned: karlcow)

Tracking

unspecified
ARM
Gonk (Firefox OS)

Firefox Tracking Flags

(b2g-v2.0 affected, b2g-v2.1 affected, b2g-v2.2 affected)

Details

(Whiteboard: [2.1-flame-test-run-3][contactready] [css] [country-all])

Attachments

(2 attachments)

(Reporter)

Description

3 years ago
Created attachment 8500543 [details]
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
(Reporter)

Comment 1

3 years ago
Created attachment 8500544 [details]
2014-10-06-12-45-31.png
(Reporter)

Comment 2

3 years ago
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
QA Whiteboard: [QAnalyst-Triage?]
Flags: needinfo?(dharris)
Also reproduces in Fennec.
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.
Whiteboard: [2.1-flame-test-run-3] → [2.1-flame-test-run-3][contactready]
(Assignee)

Comment 5

3 years ago
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.
Assignee: nobody → kdubost
Status: NEW → ASSIGNED
Flags: needinfo?(jdlrobson)
Whiteboard: [2.1-flame-test-run-3][contactready] → [2.1-flame-test-run-3][contactready] [css] [country-all]

Comment 6

3 years ago
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/
not nominating to block, as this is a tech evangelism bug
QA Whiteboard: [QAnalyst-Triage?] → [QAnalyst-Triage+]
Flags: needinfo?(dharris)
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
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.
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

3 years ago
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!).
I haven't yet--will file today (was traveling for a conf since last week) and link it here.
This is fixed now (probably has been for a while).
Status: ASSIGNED → RESOLVED
Last Resolved: 2 years ago
Flags: needinfo?(jdlrobson)
Resolution: --- → FIXED

Comment 14

2 years ago
Great! Thanks all!
You need to log in before you can comment on or make changes to this bug.