www.adobe.com - Incorrect position of the error messages on “Contact” overlay

softvision-oana-arbuzov commented 7 years ago

URL: https://www.adobe.com/de/enterprise.html?promoid=QQ42PC3G&mv=other#amc-rfi

Browser / Version: Firefox Mobile Nightly 56.0a1 (2017-08-01) Operating System: LG G5 (Android 7.0) - Resolution 1440 x 2560 pixels (~554 ppi pixel density) Tested Another Browser: Yes

Problem type: Design is broken Description: Incorrect position of the error messages on “Contact” overlay

Steps to Reproduce:

Navigate to: https://www.adobe.com/de/enterprise.html?promoid=QQ42PC3G&mv=other#amc-rfi.
Tap any of the fields (e.g. “Vorname” (“First name”)).
Leave the field empty and tap a different field (e.g. “Nachname” (“Surname”)).
Observe error message position.

Expected Behavior: Error message is displayed under the field.

Actual Behavior: Error message is displayed inside the field.

Note:

Reproducible on Firefox 54.0 Release (Mobile) and
Not reproducible on Chrome (Mobile) 59.0.3071.125.
Screenshot attached.

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

sv; country: de

From webcompat.com with ❤️

MDTsai commented 7 years ago

Confirmed, move to needsdiagnosis.

softvision-oana-arbuzov commented 6 years ago

The issue is still reproducible.

Tested with: Browser / Version: Firefox Nightly Mobile 59.0a1 (2018-01-15) Operating System: Google Pixel (Android 8.1.0) - Resolution 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 commented 6 years ago

Markup

<div class="row textfield 8 error"
    style="outline: 1px solid pink;">
    <label for="Form40_8"
        class="required">Vorname </label>
    <input id="Form40_8"
        name="Form40[8]"
        onfocus="_faas_site_catalyst_form_interaction(this,'8',8)"

        maxlength="40"
        placeholder="Vorname "
        type="text">
    <div>
        <div id="Form40_8_em_"
            class="errorMessage"
            style="">Vorname darf nicht leer sein.</div>
    </div>
    <div class="clear-both"></div>
</div>

The CSS for the div containing the error message. I put in comments the non-standard ones.

form .row div:first-child, form .row label ~ div, form [role="region"] div:first-child, form [role="region"] label ~ div {
    /* -webkit-align-content: flex-end; */
    /* -ms-flex-line-pack: end; */
    align-content: flex-end;
    /* -webkit-align-items: baseline; */
    /* -ms-flex-align: baseline; */
    align-items: baseline;
    /* display: -webkit-flex; */
    /* display: -ms-flexbox; */
    display: flex;
    /* -webkit-flex: 1 1 19em; */
    /* -ms-flex: 1 1 19em; */
    flex: 1 1 19em;
    /* -webkit-flex-wrap: wrap; */
    /* -ms-flex-wrap: wrap; */
    flex-wrap: wrap;
}

This is what we get.

Let's remove flex-wrap: wrap; and…

Working.

The other solution I found was to add a display: block

<div class="row textfield 8 error"
    style="outline: 1px solid pink;">
    <label for="Form40_8"
        class="required">Vorname </label>
    <input id="Form40_8"
        name="Form40[8]"
        onfocus="_faas_site_catalyst_form_interaction(this,'8',8)"

        maxlength="40"
        placeholder="Vorname "
        type="text">
    <div style="display: block;">
        <div id="Form40_8_em_"
            class="errorMessage"
            style="">Vorname darf nicht leer sein.</div>
    </div>
    <div class="clear-both"></div>
</div>

I switch to needscontact but maybe this is interesting for @dholbert on flexbox differences with Chrome.

dholbert commented 6 years ago

So I'm pretty sure Firefox is correct here, and Chrome (and Edge) are incorrect.

The "problematic" bit of CSS here is align-content: flex-end. That is getting (incorrectly) ignored in Chrome and Edge, and if the site wants the Chrome/Edge behavior (as they probably do), then they should just remove that line since they're depending on it not having any effect.

RE why other browsers are wrong here:

Chrome has a pretty serious bug with sizing/positioning, in flex-wrap:wrap flex containers that happen to just have a single line -- and among other things, it means they ignore align-content in these containers. This is https://bugs.chromium.org/p/chromium/issues/detail?id=599828 , and I think it's why they get things wrong here. Here's a reduced testcase for that (which Edge & Firefox agree on, but Chrome disagrees on due to this Chrome bug): https://jsfiddle.net/tqydyp0w/
Edge has a more subtle bug -- they only ignore "align-content" on abspos children of a flex container. And in this case, the child is indeed abspos, so it triggers this Edge bug. Reduced testcase for that (which Edge fails, but Firefox passes): https://jsfiddle.net/05b2oa7L/ I verified my understanding on this point with spec editor @TabAtkins, and he agrees with my understanding, based on this bit of flexbox spec text:

"The static position of an absolutely-positioned child of a flex container is determined such that the child is positioned as if it were the sole flex item in the flex container, assuming both the child and the flex container were fixed-size boxes of their used size." https://drafts.csswg.org/css-flexbox/#abspos-items

Edge is not honoring that bit of spec text right now (if they were, then they'd render my above-linked jsfiddles the same way).

Anyway - as noted above, the site likely wants to drop align-content: flex-end (and its prefixed forms) since they're relying on it being ignored (and Firefox correctly does not ignore it).

dholbert commented 6 years ago

CC @gregwhitworth - Edge has a bug here, as noted above. They're not honoring align-content when determining the static position of the the abspos children at https://jsfiddle.net/05b2oa7L/ , even though https://drafts.csswg.org/css-flexbox/#abspos-items says they should.

karlcow commented 5 years ago

Trying to find a way to send a simple bug report… and it's like Fort Knox to report something about the website itself.


/* aceui-reimagine.min.fp-873eaa7747273644835274d56d75d695.css | https://www.adobe.com/etc.fps.clientlibs/beagle/fe/resources/css/aceui-reimagine.min.fp-873eaa7747273644835274d56d75d695.css */

.faasform form .row input ~ div, .faasform form .row select ~ div, .faasform form .row textarea ~ div {
  align-content: flex-start;
}

https://twitter.com/MozWebCompat/status/1181440648651493381

dholbert commented 5 years ago

BTW, Chrome "fixed" the bug that I linked above, but only partly -- they're now in the same situation as Edge, where they've got this working for normal flex items but broken for abspos children of a flex container. I'll file a bug on that.

dholbert commented 5 years ago

I filed https://bugs.chromium.org/p/chromium/issues/detail?id=1012441 on the remaining Chrome bug (which the site is inadvertently depending on, by expecting align-content to be ignored here).

cipriansv commented 4 years ago

After retesting the issue I noticed that the layout has changed.

Tested with: Browser / Version: Mobile 68.5a1 (2020-01-11), Firefox Preview Nightly 200112 (🦎 74.0a1-20200110095023) Operating System: Huawei P10 (Android 9.0) - 1080 x 1920 pixels (~432 ppi pixel density)

Closing the issue as invalid.

webcompat / web-bugs

www.adobe.com - Incorrect position of the error messages on “Contact” overlay #8616