line-height (CSS) on <select> causes misplacing of content in select box
Reported by
pf77ber...@googlemail.com,
Sep 14 2016
|
|||||
Issue descriptionTHIS TEMPLATE IS FOR FILING BUGS ON THE ANDROID SYSTEM WEBVIEW. GENERAL WEB BUGS SHOULD BE FILED USING A DIFFERENT TEMPLATE! Device name: Nexus 5 (and others) Android version: 5 (and others) WebView version: 53.0.2785.113 (and before; first noticed on 53.0.2785.90) Application: any web apllication Steps to reproduce: (1) add a fixed line-height to a <select> element in CSS Expected result: Select box is rendered bigger, text still in the center. Actual result: Select box is rendered bigger, text is moved down and only partially visible.
,
Sep 23 2016
Do you have a link to sample html page to test this? Is the behavior different to chrome on android?
,
Sep 26 2016
The behaviour is the same in Chrome on Android. You can use this link: https://secure.deutsche-bank.de/pbc/trxmdemokonto/loginpin/goto.do (The page is only available in German, sorry for that). There is a select box on the site with the label "Direkt zu ..." There you can see the problem. If you tap the red button ("Demokonto starten") and scroll down, then there is another select box, labeled "Weitere Optionen:" that shows the issue aswell.
,
Sep 29 2016
CCing this week's bug cop to get this moving.
,
Sep 30 2016
So, this is interesting: 1) I don't see the result you describe in "Actual result" - for me the select box stays the same size and only the text within it changes size (which causes it to be only partly visible). 2) The spec says that line-height is not supposed to affect replaced inline elements like <select>. On my desktop Chrome, line-height does nothing whatsoever to <select> elements as expected. However, the footnote on https://developer.mozilla.org/en/docs/Web/CSS/line-height mentions that WebKit (at least at one point) did incorrectly apply line-height in some cases; maybe Chrome has fixed that. 3) On the current beta and dev releases (M54 and M55) it does adjust the height of the select box and everything appears to work as you expect. So, I'm not sure what the right behaviour is here. If it's supposed to change the height then it looks like it's already fixed in M54 which will be released to stable in the next couple of weeks, so there's nothing more to do here (you can confirm this for yourself by testing the beta version). But.. it definitely doesn't seem to change the height on desktop, and the spec seems to suggest it shouldn't. Maybe you should use a different way of changing the size of the select box anyway? CSS people, any idea what behaviour is actually right here?
,
Oct 5 2016
iOS Safari renders the select box as larger, same as the most recent version of Chrome. As both Chrome and Safari are now interoperable here, I'm going to say this is now the correct behaviour on mobile. Based on this, I'm going to close this bug. Please reopen if this is incorrect. |
|||||
►
Sign in to add a comment |
|||||
Comment 1 by pf77ber...@googlemail.com
, Sep 20 2016