www.lemonde.fr - Incorrect check-box style for option in “S'inscrire” page

[softvision-oana-arbuzov]

URL: http://www.lemonde.fr/sfuser/register

Browser / Version: Firefox Mobile Nightly 57.0a1 (2017-09-07)
Operating System: Huawei P10 (Android 7.0) - Resolution 1080 x 1920 pixels (~432 ppi pixel density)
Tested Another Browser: Yes

Problem type: Design is broken
Description: Incorrect check-box style for option in “S'inscrire” page
Steps to Reproduce:

1. Navigate to: http://www.lemonde.fr/sfuser/register.
2. Tap the “User Account” icon and select “S'inscrire” (“Register”) button.
3. Observe check-box style for the “Oui, je souhaite recevoir les informations des partenaires du Monde” option.

Expected Behavior:
Check-box has correct style (square).

Actual Behavior:
Check-box has incorrect style (rectangle).

Note:

1. Not reproducible on Firefox 55.0.2 Release (Mobile) and on Chrome (Mobile) 60.0.3112.107.
2. Screenshot attached.

Watchers:
@softvision-sergiulogigan
@softvision-oana-arbuzov

sv; country: fr

From webcompat.com with ❤️

[miketaylr]

Seems to have to do with the content of the associated <label> wrapping:

<div class="label-en-ligne">
  <input id="register_optin_partner" name="register[optin_partner]" value="1" type="checkbox">
  <label for="abo-info-partenaires" class="label-inline">Oui, je souhaite recevoir les informations des partenaires du Monde
  </label>
</div>

If you edit the text and make it shorter, the height looks normal.

[miketaylr]

Ah, here we go: https://codepen.io/miketaylr/full/XebXbr/

Interaction with flexbox. If the parent container has display: flex things get weird.

[miketaylr]

I filed https://bugzilla.mozilla.org/show_bug.cgi?id=1400050 for this. Let's close as a dupe of that.