fortiguard.com - “Browse” button is displayed misaligned

[softvision-oana-arbuzov]

URL: https://fortiguard.com/faq/onlinescanner

Browser / Version: Firefox Mobile Nightly 62.0a1 (2018-05-07)
Operating System: Linux Ubuntu 16.04
Tested Another Browser: Yes

Problem type: Design is broken
Description: “Browse” button is displayed misaligned.

Steps to Reproduce:

1. Navigate https://fortiguard.com/faq/onlinescanner
2. Observe “Browse” button.

Expected Behavior:
Button is centered.

Actual Behavior:
Button is misaligned.

Note:

1. Reproducible on Firefox 60.0 Release.
2. Not reproducible on Chrome 66.0.3359.139.
3. Screenshot attached.
4. Affected area:

<input id="online_scanner_form_file" name="online_scanner_form[file]" required="required" class="form-control" type="file">

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

sv; country: us

From webcompat.com with ❤️

[softvision-oana-arbuzov]

Removing height: 34px;, "Browse" button becomes centered and does not affect Chrome.

.form-control {
    display: block;
    width: 100%;
    height: 34px;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857143;
    color: #555;
    background-color: #fff;
    background-image: none;
    border: 1px solid #ccc;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
    -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
}

@karlcow can you confirm this?

[karlcow]

yes removing the height will solve the issue and in this case, it saves no purpose be on chrome, safari or firefox. fwiw the issue is happening on desktop too.

The way the form widgets are affected are not really defined in CSS. What is happening here is that Firefox switches from a native widget to a CSS custom widget. Chrome/Safari just ignores the instruction for the widget size and grows the box only. Firefox grows the widget itself.

It's probably tied to the -webkit-appearance stuff. Partly.

[karlcow]

I opened https://bugzilla.mozilla.org/show_bug.cgi?id=1460186

[adamopenweb]

https://fortiguard.com/faq/generalcontact

Reaching out via site contact form.

[softvision-oana-arbuzov]

The issue has been fixed.

Tested with:
Browser / Version: Firefox Nightly 69.0a1 (2019-06-26)
Operating System: Linux Ubuntu 16.04