Why is my drop down CSS disappearing, and how can I fix it?

Question

This is a really strange problem which only affects Google Chrome.

If I have 299 rows in a drop down list, it keeps my custom CSS. However, the second I reach 300 rows all my styling is removed and seems to be set to a default by Google Chrome.

In the JSFiddle page, it has 300 rows, if you view the result, it will have default styling. But if you remove one row, my custom styling will be applied. Why is this?

JSFiddle: https://jsfiddle.net/s7opd7dm/

Simple drop down element:

@Html.DropDownListFor(m => m.SupplierID, new SelectList(Model.Suppliers, "SupplierID", "DisplayName"), "Select Supplier Name", new { @id = "SuppNameDD", @class = "GRDropDown", disabled = true })

Answer 1

I had the same problem. I found out that they disabled it at 300 options or more.

We intentionally disabled styling for 300+ options because of a performance issue (crbug.com/500401).

Read about it here