0

I have an interesting bug. I have no idea why this is happening. I have a large project that has tons of inputs and selects. When a select popup shows ups it is not clickable on older android devices. Specifically what is causing the issue is Android stock browser 2.3.4. I narrowed it down to the below code. The two selects are on top of each other. But one is absolutely positioned to the right side. If you click on the left select it works. If you click on the right select nothing happens. On all other browsers it opens the right select. I would think it should at least do something.

Have you heard of this and do you know any work arounds?

<!doctype html>
<html>
<head>
  <meta name="viewport" content="width=device-width,minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

<style>
  select {
    width:100%;
  }
  #workPerformedFields {
    background-color:#FFFFFF;
    border:1px solid #999999;
    position:absolute;
    left:50%;
    width:300px;
  }
</style>
</head>
  <body>
    <div id="workPerformedFields">
      <select>
        <option>One</option>
      </select>
    </div>
    <div >
      <select>
        <option>Two</option>
      </select>
    </div>
  </body>
</html>
David Corrado
  • 363
  • 3
  • 19

1 Answers1

0

Change user-scalable=no to user-scalable=yes It's a known bug.

Kevin Lynch
  • 24,427
  • 3
  • 36
  • 37