authentification-candidat.pole-emploi.fr - "Help" icon is displayed misaligned

softvision-oana-arbuzov commented 4 years ago

URL: https://authentification-candidat.pole-emploi.fr/connexion/XUI/?realm=%2Findividu&goto=https%3A%2F%2Fauthentification-candidat.pole-emploi.fr%3A443%2Fconnexion%2Foauth2%2Frealms%2Froot%2Frealms%2Findividu%2Fauthorize%3Frealm%3D%252Findividu%26response_type%3Did_token%2520token%26scope%3Dopenid%2520compteUsager%2520profile%2520contexteAuthentification%2520email%2520courrier%2520notifications%2520etatcivil%2520logW%2520individu%2520pilote%2520nomenclature%2520coordonnees%2520navigation%2520reclamation%2520prdvl%2520idIdentiteExterne%2520pole_emploi%2520suggestions%2520actu%2520application_USG_PN073-tdbcandidat_6408B42F17FC872440D4FF01BA6BAB16999CD903772C528808D1E6FA2B585CF2%26client_id%3DUSG_PN073-tdbcandidat_6408B42F17FC872440D4FF01BA6BAB16999CD903772C528808D1E6FA2B585CF2%26state%3Do5fgPFuQs1efwD5P%26nonce%3D-ipUcR1Zp92qSQPh%26redirect_uri%3Dhttps%253A%252F%252Fcandidat.pole-emploi.fr%252Fespacepersonnel%252F#login/

Browser / Version: Firefox 81.0 Operating System: Windows 10 Tested Another Browser: Yes Chrome

Problem type: Design is broken Description: Items are misaligned Steps to Reproduce:

Expected Behavior: "Help" button is displayed correctly (after "Nom d'utilisateur" text).

Actual Behavior: "Help" button is displayed misaligned.

Notes:

Screenshot attached.
The issue is not reproducible on Chrome 84.0.4147.105
The issue is reproducible on mobile layout also.

Affected area:

<a id="lienOuverturePopinAide" role="button" href="#" class="btn btn-icon-only btn-reset aide-connexion" style="display:flow;" data-tooltip="" data-placement="top" data-toggle="modal" data-target="#PopinHelp" data-original-title="Aide" onclick="tagDeNavigation(this, 'Ou_trouver_mes_identifiants')">
                <span class="icon-ask" aria-hidden="true"></span><span class="sr-only">Qu'est-ce que mon identifiant</span>
            </a>

Watchers: @softvision-oana-arbuzov @cipriansv

View the screenshot

Browser Configuration

None

From webcompat.com with ❤️

karlcow commented 4 years ago

<div id="div-identifiant" class="f-line label-placeholder with-visible-label identifiant">
  <label for="identifiant">
    <span>Nom d'utilisateur</span>
    <span>
      <a id="lienOuverturePopinAide" role="button" href="#" class="btn btn-icon-only btn-reset aide-connexion" style="display:flow;" data-tooltip="" data-placement="top" data-toggle="modal" data-target="#PopinHelp" data-original-title="Aide" onclick="tagDeNavigation(this, 'Ou_trouver_mes_identifiants')">
        <span class="icon-ask" aria-hidden="true"></span>
        <span class="sr-only">Qu'est-ce que mon identifiant</span>
      </a>
    </span>
  </label>
  <input type="text" id="identifiant" name="callback_0" value="" data-validator="required" required="" data-validator-event="keyup" class="form-control with-icon" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" aria-required="true">
  <span class="form-control-feedback" aria-hidden="true"></span>
</div>

Changing this

#lienOuverturePopinAide {
  /* display: flow; */
}

is fixing it.

display: flow is converted as display: block in Firefox.

I wonder if there is an implementation difference in between chrome and Firefox about flow. Ah no! Found.

if I set in Chrome

#lienOuverturePopinAide {
  display: flow-root
}

The site breaks evenly on Chrome. So what is happening is that because Chrome considers it invalid it doesn't do anything hence it's like removing it.

This is a site mistake, so switching to needscontact.

At the same time, I wonder if Firefox really needs to support display: flow Maybe we can unship that value.

@emilio is, I think, the closest to this feature. Should I file a bug to unship it or get telemetry for it.

emilio commented 4 years ago

Yeah, this is working as expected on our end I think.

webcompat / web-bugs

authentification-candidat.pole-emploi.fr - "Help" icon is displayed misaligned #56150