www.allocine.fr – “Registration” form layout is messed up

[softvision-oana-arbuzov]

URL: https://secure.allocine.fr/account/register
Browser / Version: Firefox Mobile Nightly 55.0a1 (2017-05-05)
Operating System: Nexus 5 (Android 6.0.1) - Resolution 1080 x 1920 pixels (~445 ppi pixel density)
Problem type: Layout is messed up

Steps to Reproduce

1. Navigate to: https://secure.allocine.fr/account/register
2. Type in the required info.
3. Observe behavior when typing “Pseudo” info.

Expected Behavior:
Layout is correctly displayed (no elements are overlapped or cropped).

Actual Behavior:
Layout becomes messed up (notification info overlaps the text/notifications info become cropped).

Note:

1. Reproducible on Firefox 52.0 Release
2. Not reproducible on Chrome (Mobile) 57.0.2987.132.
3. Screenshot attached.

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

sv; country: fr

From webcompat.com with ❤️

[karlcow]

The behavior happens when some of the input text area forms are on focus. Password, Pseudo

The tooltip is something like.

<div class="tooltip_inscription j_tooltip hidden" style="top: 79px;">
                <span class="arrow_l"></span><strong>Email et mot de passe</strong><br>
                Ce sont les identifiants qui vous permettront de vous connecter sur AlloCiné. Choisissez un mot de passe sécurisé !
            </div>

with

.secure .tooltip_inscription::before {
	display: block;
	content: '';
	position: absolute;
	left: 50%;
	margin-left: -2px;
	top: -5px;
	bottom: auto;
	width: 0px;
	height: 0px;
	border-style: solid;
	border-width: 0 5px 5px 5px;
	border-color: transparent transparent #4D4E53 transparent;
	background: none;
}
.secure .tooltip_inscription {
	position: relative;
	top: auto;
	left: auto;
	width: auto;
	margin-top: 0 !important;
	visibility: visible !important;
}

Maybe this part, because when focusin it adds a style attribute with a top CSS property.

  function h(a, d) {
    if ($('.field-validation-error').length) return;
    var c = a.parents('fieldset'),
    b = c.find('#' + d),
    e = a.position().top + a.height() / 2 - b.height() / 2;
    b.css({
      top: e
    }).removeClass('hidden')
  }

.secure .tooltip_inscription is a position relative, but the height is computed depending on a position absolute, it seems. If I had position: absolute to the style attribute. everything is working.

We have to explore why there is a difference in between chrome and Firefox for this.

[softvision-oana-arbuzov]

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)

[karlcow]

At the first load of the page. The #tooltip_nickname is

.secure #one_col .pos_rel, .secure #two_cols .pos_rel {
	zoom: 1;
}
.pos_rel {
	position: relative !important;
}
.hidden {
	visibility: hidden !important;
}

.secure .tooltip_inscription {
	position: absolute;
	top: 50%;
	left: 598px;
	width: 304px;
	padding: 8px;
	background: #4D4E53;
	color: #fff;
	font-size: 11px;
	z-index: 2;
}

.secure .tooltip_inscription {
	position: relative;
	top: auto;
	left: auto;
	width: auto;
	margin-top: 0 !important;
	visibility: visible !important;
}

once I focus in. It adds a top: 134.8px; but without a position: absolute.

BUT fwiw this is happening in Chrome Canary too.

Let's close it as non-compat