CSS3 scaled elements issue in Firefox

Question

I've a simple div element having a select box in it. The div has been scaled down using css transform as:

<div>
    <select name="" id="">
        <option value="One">One</option>
        <option value="Two">Two</option>
    </select>
</div>

div {
    -webkit-transform: translate(0px, 0px) scale(0.6);
       -moz-transform: translate(0px, 0px) scale(0.6);
}

In chrome:

In Firefox:

Here is a demo (http://jsfiddle.net/codef0rmer/sZSV3). There is the same issue with input boxes in iPad wherein cursor is misplaced when input gets a focus. Is there any way I can fix it?

Answer 1

You've just met Bug 455164

CSS transforms (that are more than just translations) do not apply to the options of a selectbox

This is not limited to Scale, but to almost any other CSS3 transformations.

Basically, you can style the <select>, but not its <option>s.

If you scale the select (by scaling its container), the options won't be resized, nor moved. In fact, the options will use as starting position their unscaled original position (try removing Scale transform and opening the select box to check this).

There is nothing you can do right now.

You need a B-plan: try finding another way to achieve what you need that doesn't use CSS3 transform (with Javascript for example), or that doesn't use the select box (by using custom selectboxes, for example... it's full out there).