time-entry.rei.workforcehosting.com - "Login" form design is broken

[softvision-oana-arbuzov]

URL: https://time-entry.rei.workforcehosting.com/workforce/Mobile.do#app

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

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

1. Navigate to https://time-entry.rei.workforcehosting.com/workforce/Mobile.do#app
2. Observe the "Login" form.

Expected Behavior: The form design is displayed correctly.

Actual Behavior: The form design is broken.

Notes:

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

Watchers: @softvision-oana-arbuzov @softvision-raul-bucata

View the screenshot

Browser Configuration

• None

From webcompat.com with ❤️

[ksy36]

The site is using a combination of display: flex and display: -webkit-box:

.x-layout-box {
    display: flex;
    display: -webkit-box;
    display: -ms-flexbox;
}

If I drop webkit-box declarations and only leave display:flex, the elements are positioned as expected:

Given that display:-webkit-box is declared after display:flex, it has higher precedence. A recommended fix is to place "display:flex" after "display:-webkit-box;", to get the modern layout mode by default.

We also have a tracking bug for such issues https://bugzilla.mozilla.org/show_bug.cgi?id=1238668 caused by emulation of "display:-webkit-box", so I'm going to link this issue.

We should contact the site to see if they can change the order of declarations.

[webcompat-bot]

Generate outreach template

[reinhart1010]

A WHOIS domain lookup of workforcehosting.com provides us a hint to workforcesoftware.com:

Name Server: NS0.WORKFORCESOFTWARE.COM
Name Server: NS1.WORKFORCESOFTWARE.COM
Name Server: NS2.WORKFORCESOFTWARE.COM
Name Server: NS3.WORKFORCESOFTWARE.COM
Name Server: NS4.WORKFORCESOFTWARE.COM

There is a contact form on https://www.workforcesoftware.com/contact-us/