CODEWITHSUNDEEP
htmlgoogle-chromehtml-selecttext-rendering
danimalweb
danimalweb

Reputation: 65

Chrome select box option text is distorted when open

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

Upvotes: 2

Views: 664

Answers (2)

Mr_Chimp
Mr_Chimp

Reputation: 6917

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.

Upvotes: 1

Mukul Kant
Mukul Kant

Reputation: 7122

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>

Upvotes: 0

Related Questions