Closed softvision-oana-arbuzov closed 5 years ago
The HTML
<div class="mw-ui-checkbox">
<input name="wpmultimediaviewer-enable" value="1" checked="checked"
id="mw-input-wpmultimediaviewer-enable" type="checkbox">
<label for="mw-input-wpmultimediaviewer-enable">Activer <span class="plainlinks"><a class="external text" href="https://www.mediawiki.org/wiki/Special:MyLanguage/Extension:Media_Viewer/About">la visionneuse de médias</a></span></label>
</div>
and the associated CSS.
div
is a display:table
label
is a table-cell
.client-js .mw-ui-checkbox:not(#noop) {
position: relative;
display: table;
}
.client-js .mw-ui-checkbox:not(#noop) input[type="checkbox"] + label {
display: table-cell;
}
we can see all of that into
if we remove the
.client-js .mw-ui-checkbox:not(#noop) * {
font: inherit;
/* vertical-align: middle; */
}
it displays in the bottom of the cell but at least aligned.
Let's check how the boxes are organized on WebKit
It's interesting because on Gecko vertical-align:
for top
, baseline
and bottom
. all align correctly the text, but when it's middle it's messy.
display: inline-flex
on the a
seems the improve things, but still not perfect.
.client-js .mw-ui-checkbox:not(#noop) * {
font: inherit;
vertical-align: middle;
display: inline-flex;
}
The best way is to replace everything which is table with a flex
model.
@dbaron may know why there is a difference in between WebKit/Blink and Gecko.
The issue is still reproducible.
Tested with: Browser / Version: Firefox Mobile Nightly 59.0a1 (2018-01-04) Operating System: Google Pixel (Android 8.1.0) - 1080 x 1920 pixels (~441 ppi pixel density), Samsung Galaxy S7 Edge (Android 7.0) - Resolution 1440 x 2560 pixels (~534 ppi pixel density)
fixed by adding Roboto to the list of fonts.
body {
font-family: 'Helvetica Neue','Helvetica','Nimbus Sans L','Arial','Liberation Sans', Roboto, sans-serif;
line-height: 1.4;
color: #222222;
}
Close as duplicate of https://bugzilla.mozilla.org/show_bug.cgi?id=1392147
Issue is still reproducible. tested on Huawei P10, Android 7.0 and Nightly 62.
So back to the initial suggestion. This is fixing it.
.client-js .mw-ui-checkbox:not(#noop) * {
font: inherit;
/* vertical-align: middle; */
}
All mediawiki projects have the same issue btw.
https://en.m.wikipedia.org/wiki/Special:Preferences#mw-prefsection-rendering
and probably @jdlrobson can help us fix it.
After retesting the issue I confirm that the issue has been fixed.
Tested with: Browser / Version: Firefox Nightly 68.0a1 (2019-06-24), Firefox Fenix (Preview) 1.0.1926 Operating System: Huawei P10 (Android 8.0) - 1080 x 1920 pixels (~432 ppi pixel density)
URL: https://en.m.wikivoyage.org/wiki/Special:Preferences/files Browser / Version: Firefox Mobile Nightly 55.0a1 (2017-04-26) Operating System: Android 6.0.1 Problem type: Something else - I'll add details below
Prerequisites:
Steps to Reproduce
Expected Behavior: “Enable” and “Media Viewer” texts are aligned.
Actual Behavior: “Media Viewer” text is misaligned.
Note:
Watchers: @softvision-sergiulogigan @softvision-oana-arbuzov
sv; country: fr
From webcompat.com with ❤️