m.youdao.com - layout is messed up

[MDTsai]

URL: http://m.youdao.com/
Browser / Version: Firefox Mobile 51.0
Operating System: Android 5.1.1
Problem type: Layout is messed up

Steps to Reproduce

1. Navigate to: http://m.youdao.com/

Expected Behavior: Search button looks good

Actual Behavior: Only half search button

Problem should be in the CSS style of search button use .

From webcompat.com with ❤️

[tsl143]

Can be reproduced , even in responsive design mode.

[MDTsai]

Problem is the default height of input element. There is no value in the input element.

Firefox gives default height 2px but Chrome gives default height according to user agent style:

{
  inline-height: normal # I guess it's 16px by default
}

I'm not sure if it's possible to fix like this: https://jsfiddle.net/6cvzdf0g/2/

.btn {
    white-space: pre; # origin is nowrap
}
.btn::-moz-focus-inner { 
    border: 0; # disable the border
}

@karlcow, could you help to give a better solution?

[wisniewskit]

@MDTsai: in truth, they really should be using CSS flexbox for this kind of thing these days. But if they don't wanna, then adding these rules should work fine instead:

.search-bar { /* the form */
  height:1px; /* the actual value here doesn't matter, we just have to specify one */
}

.search-bar .input-group-btn { /* the wrapper inside it that the button is inside */
  height: 100%;
}

.search-bar .btn { /* the button input itself */
  height: 100%;
  display: block;
  background-position: 50% 50%;
}

This forces the button to be 100% the height of its parent, which in turn is 100% of the height of the form. The form is set to display:table, so it doesn't matter what height we give it above, it will just be whatever height it should be based on the other "table cells". This way the border can also stay.

[MDTsai]

Fill form for this issue to youdao, thanks @wisniewskit !

[MDTsai]

Youdao has github account @netease-youdao , ping @bartonding to see if we can have get connection from anyone in youdao.

[cipriansv]

I retested the issue and it is still reproducible on my side.

Tested with:
Browser / Version: Firefox Nightly 68.1a1 (2019-08-20), Firefox Preview 1.3.0 (Build #12321503)
Operating System: Huawei P10 (Android 8.0) - 1080 x 1920 pixels (~432 ppi pixel density)