Incorrect height of dropdown for a multiline select box containing an emoji as an option
Reported by
rdevaiss...@skytap.com,
Sep 21 2016
|
|||
Issue descriptionUserAgent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/53.0.2785.116 Safari/537.36 Steps to reproduce the problem: 1. Create a select box with size set to X and X+1 options 2. Verify only X options are visible 3. Change the list of options to X and add an option with an emoji What is the expected behavior? After step 3, only X options should be visible What went wrong? After step 3, more than X options are visible (see the attached snippet of HTML to repro the bug). Did this work before? Yes 52.0.2743.116 Chrome version: 53.0.2785.116 Channel: stable OS Version: OS X 10.11.6 Flash Version: Shockwave Flash 23.0 r0
,
Sep 22 2016
,
Sep 22 2016
The intrinsic height of a listbox SELECT is calculated by <maximum option height> * <size attribute value>, and an emoji is taller than ASCII characters.
A workaround is to specify a fixed height to option elements.
option {
height: 14px;
}
,
Sep 22 2016
According to the HTML specifications, the size attribute for a select tag "Gives the number of options to show to the user". I see more options than I expect so strictly speaking the implementation is not according to specification. Now I see your point, since "an emoji is taller", you want that very logic to make sure you render 5 rows in case 5 emojis are there. Firefox has a similar issue but Safari has no problem following the spec. Couple questions: * Should emojis be taller than ASCII characters? * They don't seem taller but the height of the option is (default to 18px instead of 13.1875px) * How come was this not an issue in version 52? Thanks very much
,
Sep 26 2016
Issue 650085 has been merged into this issue. |
|||
►
Sign in to add a comment |
|||
Comment 1 by rdevaiss...@skytap.com
, Sep 21 20166.7 KB
6.7 KB View Download