Web-bugs: www.dunkindonuts.com - Sign In form is messed up

[softvision-sergiulogigan]

URL: https://www.dunkindonuts.com/en/sign-in

Browser / Version: Firefox Nightly 68.0a1 (2019-03-31)
Operating System: Windows 10
Tested Another Browser: Yes
VPN active poiting to USA

Problem type: Design is broken
Description: Sign In form is messed up
Steps to Reproduce:

1. Navigate to: https://www.dunkindonuts.com/en/sign-in

Expected Behavior:
The Sign In form is correctly displayed.

Actual Behavior:
The Sign In form is messed up.

Notes:

1. The issue is not reproducible on Chrome.
2. Screenshot attached.

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

sv;

Browser Configuration

• None

_From webcompat.com with ❤️_

[softvision-sergiulogigan]

Also reproducible on https://www.dunkindonuts.com/en/dd-perks/registration

[karlcow]

Rendering in Chrome

[karlcow]

This is a bit weird.

This change makes it work.

/* all.min.a989aa94a006f1e348f265d013c20d57.css | https://www.dunkindonuts.com/etc/designs/dd/styles/all.min.a989aa94a006f1e348f265d013c20d57.css */

.grid__item {
  /* -webkit-flex-basis: min-content; */
  /* -ms-flex-preferred-size: min-content; */
  /* flex-basis: min-content; */
}

in Chrome

.grid__item {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    width: 100%;
    -webkit-flex-basis: min-content;
    -ms-flex-preferred-size: min-content;
    flex-basis: min-content;
    position: relative
}

The series flex-basis: min-content; is considered invalid and not applied.
but in Firefox, the min-content is applied.

@dholbert
I was wondering if it was this
https://bugs.chromium.org/p/chromium/issues/detail?id=944614
Slightly worried about their intent to change here.

So for the site owners just remove

    -webkit-flex-basis: min-content;
    -ms-flex-preferred-size: min-content;
    flex-basis: min-content;

[dholbert]

It's not related to that Chrome bug, no. But it is a Chrome bug. I'll file a bug report on them.

As you noticed, it looks like Chrome doesn't have support for flex-basis:min-content, but you can emulate it by instead providing width:min-content; flex-basis:auto. If you give .grid__item that styling in Chrome, then they match the Firefox rendering, indicating that they agree with us if you can just massage the CSS into a form that they accept.

Anyway: I agree that removing the flex-basis:min-content styling is what the site wants to do here.

[dholbert]

I filed https://bugs.chromium.org/p/chromium/issues/detail?id=948419 on Chrome's bug here.

[ksy36]

Created https://bugzilla.mozilla.org/show_bug.cgi?id=1575017

[ksy36]

Also reached out to the site via twitter DM

[softvision-oana-arbuzov]

The issue has been fixed. The form layout is displayed correctly now.

Tested with:
Browser / Version: Firefox Nightly 82.0a1 (2020-09-03)
Operating System: Windows 10 Pro