www.ryanair.com - design is broken

[gerdneuman]

URL: https://www.ryanair.com/de/de/

Browser / Version: Firefox 59.0 Operating System: Linux Tested Another Browser: Yes

Problem type: Design is broken Description: Input Placeholder has misplaced grey shadow in Firefox Steps to Reproduce:

1. Go to https://www.ryanair.com/de/de/
2. In the Input field "Von:" (aka From where to fly) type in "Mala". This add a greyish Background shadow in Firefox (57 and Nightly aka 59; Windows 10 and Linux). Does not occur in Chrome. Probably some wrong webkit-* only CSS by ryanair.

From webcompat.com with ❤️

[karlcow]

@gerdeneuman confirmed. Thanks for the report.

The markup is

<div ng-switch="::type">
    <!---->
    <div ng-switch-when="text"
        class="field-value"
        ng-class="{'focused': $parent.focused == true}">
        <div class="disabled-wrap">
            <input tabindex="0"
                placeholder="Abflughafen"
                ng-model="$parent.value"
                ng-disabled="isDisabled()"
                ng-readonly="isDisabled()"
                ng-focus="onFocusFn()"
                ng-blur="onBlurHandler()"
                ng-hide="placeholder &amp;&amp; placeholder==translationKeys['placeholder']"

                focus-on-element="focusSwitch"
                aria-required="true"
                aria-labelledby="label-airport-selector-from"

                autocomplete="off"
                class="core-input ng-valid ng-not-empty ng-dirty ng-touched"

                role="textbox"
                type="text">
            <div class="disabled-overlay"></div>
        </div>
        <div type="text"
            readonly="true"
            aria-required="true"
            aria-labelledby="label-airport-selector-from"

            class="hint autocompletechanged"
            tabindex="-1">Malaga</div>
    </div>
    <!---->
    <!---->
</div>

The grey hint is

<div type="text" readonly="true" aria-required="true" aria-labelledby="label-airport-selector-from" class="hint autocompletechanged" tabindex="-1">Malaga</div>

which is moved with a position:absolute to make the two overlaps. That's risky probably.

[core-rich-date-input] .autocompletechanged, [core-rich-input] .autocompletechanged, core-rich-date-input .autocompletechanged, core-rich-input .autocompletechanged {
    position: absolute;
    width: 100%;
    height: 28px;
    font-size: 18px;
    line-height: 28px;
    font-weight: 700;
    padding: 0 10px;
    vertical-align: middle;
    bottom: 5px;
}

For example if I put a line-height of 35px instead of 28px they align or change bottom: 5px to bottom: 1px. It's probably very dependent on fonts, padding, line-height, etc. That doesn't seem to be a very robust design.

And I'm not sure if we can propose something that would work everywhere.

[karlcow]

In Firefox

In Chrome.

ah wait this is a lot simpler to solve,

@media screen and (-webkit-min-device-pixel-ratio: 0) {
    input[type=date],input[type=time],input[type=datetime-local],input[type=month] {
        line-height:34px
    }

    .input-group-sm input[type=date],.input-group-sm input[type=time],.input-group-sm input[type=datetime-local],.input-group-sm input[type=month],input[type=date].input-sm,input[type=time].input-sm,input[type=datetime-local].input-sm,input[type=month].input-sm {
        line-height: 30px
    }

    .input-group-lg input[type=date],.input-group-lg input[type=time],.input-group-lg input[type=datetime-local],.input-group-lg input[type=month],input[type=date].input-lg,input[type=time].input-lg,input[type=datetime-local].input-lg,input[type=month].input-lg {
        line-height: 46px
    }

    [core-rich-date-input] .autocompletechanged,[core-rich-input] .autocompletechanged,core-rich-date-input .autocompletechanged,core-rich-input .autocompletechanged {
        bottom: 1px
    }
}

It just needs to be changed by

@media screen and (-webkit-min-device-pixel-ratio: 0),
       screen and ((min-resolution:0))
    input[type=date],input[type=time],input[type=datetime-local],input[type=month] {
        line-height:34px
    }

    .input-group-sm input[type=date],.input-group-sm input[type=time],.input-group-sm input[type=datetime-local],.input-group-sm input[type=month],input[type=date].input-sm,input[type=time].input-sm,input[type=datetime-local].input-sm,input[type=month].input-sm {
        line-height: 30px
    }

    .input-group-lg input[type=date],.input-group-lg input[type=time],.input-group-lg input[type=datetime-local],.input-group-lg input[type=month],input[type=date].input-lg,input[type=time].input-lg,input[type=datetime-local].input-lg,input[type=month].input-lg {
        line-height: 46px
    }

    [core-rich-date-input] .autocompletechanged,[core-rich-input] .autocompletechanged,core-rich-date-input .autocompletechanged,core-rich-input .autocompletechanged {
        bottom: 1px
    }
}

[karlcow]

They can be contacted through https://contactform.ryanair.com/?cr=4-0&lg=en&id=43&compr=Website

[adamopenweb]

Reaching out via site contact form. Report number 4402644.

[adamopenweb]

The report was forwarded to their head office.

[softvision-sergiulogigan]

The issue has been fixed.

Tested with: Browser / Version: Firefox Nightly 70.0a1 (2019-08-08) Operating System: Linux Mint