Chrome select box option text is distorted when open

Question

The text between the option tags in a select box is not rendering correctly when open in my Chrome Version 37.0.2062.120.

See attached screenshot for a clear illustration of the issue.

When I select an option and focus away from the box the correct option is selected and renders correctly when the select box is closed.

I've tested the same in Canary 39.0.2161.0 and FF and it renders correctly without being distorted.

I've not seen anything like is before.

Anything to do with Chrome's recent font rendering update?

Any help is much appreciated.!

Link to page, form is at the bottom: http://dev.emarkadvantage.com/strategy.php

UPDATE: A fix that worked for me was to move the position of the SVG font down the @font-face stack to the bottom.

enter image description here

Here is the link: http://dev.emarkadvantage.com/strategy.php Form is at the bottom. — danimalweb, Sep 18 '14 at 06:01

score 1 · Accepted Answer · edited May 23 '17 at 12:29

1

I have had this before. Use a standard (i.e. non web) font for your selects. I don't know why web fonts cause a problem...but they do.

See also this answer.

edited May 23 '17 at 12:29

Community

1
1

answered Sep 18 '14 at 11:35

Mr_Chimp

6,658
5
37
47

Thanks for you answer. This led me to find the confirmed bug ticket: https://code.google.com/p/chromium/issues/detail?id=290414 I find it strange that it works in Canary but not in Chrome. Maybe that's a sign it will be fixed soon? – danimalweb Sep 18 '14 at 14:42
A fix that worked for me was to move the position of the SVG font down the @font-face stack to the bottom. – danimalweb Sep 18 '14 at 14:58

Mukul Kant · Answer 2 · 2014-09-18T06:14:24.373

0

You should add class on select tag,

class="form-control"

<select id="category" class="form-control">
     <option value="">Your top callenge today?</option>
     <option value="Sales">Sales</option>
     <option value="Competition">Competition</option>
     <option value="Marketing ROI">Marketing ROI</option>
     <option value="Positioning">Positioning</option>
</select>

edited Sep 18 '14 at 06:14

answered Sep 18 '14 at 06:08

Mukul Kant

7,074
5
38
53

Chrome select box option text is distorted when open

2 Answers2