-->

Select box focus bug using -moz-transform in Firef

2019-06-21 04:32发布

问题:

I've noticed that if I apply a transform on a select box focus (i.e. select:focus) in Firefox it first focuses the select box then you must click the select box again for it to actually drop down. Anyone else experience this? I tried looking for a bug at Mozilla but didn't see anything.

Webkit browsers (tested in chrome) act appropriately.

I'm on Firefox 3.6.7

Test case:

<!DOCTYPE html>
<html>
  <head>
    <style type="text/css">
    select:focus {
      -moz-transform: scale(1.05);
      -webkit-transform: scale(1.05);
    }
    </style>
  </head>
  <body>
    <select>
      <option>One</option>
      <option>Two</option>
    </select>
  </body>
</html>

I've opened a bug at mozilla https://bugzilla.mozilla.org/show_bug.cgi?id=581604

回答1:

The bug is still not fixed, but this workaround works:

Add to CSS:

select { -moz-transform: scale(1); }


回答2:

the -webkit-transform might be overwriting it try removing it and see what happens or seeing if regular transform works yet



回答3:

We're in 2016 and the bug is always here... Even with

select { -moz-transform: scale(1); }


标签: html css firefox