Your browser is not supported.

This website is optimized to work in modern browsers like Safari 3+, Firefox 4+, Chrome 10+ and IE9+. If you are using a different browser, you may experience visual glitches or other problems.

Strange but true

So I came across (and reported) a rather strange bug in Safari 4 for Windows today. If you’ve styled a select box with a border color, and your windows’ and buttons’ appearance are set to Windows Classic style in Windows XP, the down arrow on the select box disappears. No lie. Try it yourself:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xml:lang="en"
      lang="en">
<head>
  <!-- meta tags -->
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

  <style type="text/css">
    select.with-border
    {
      border-color: black;
    }
  </style>

  <!-- external javascript links -->
  <!-- libraries -->
  <script type="text/javascript"
          src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js">
  </script>

  <script type="text/javascript">
    (function($) {
      $(document).ready(function() {
        $(".user-agent").text(navigator.userAgent);
      });
    })(jQuery);
  </script>

  <title>Home</title>
</head>
<body>

  <p><strong>User agent string:</strong> <span class="user-agent">blah</span></p>

  <p>
    <select>
      <option>One</option>
      <option>Two</option>
      <option>Three</option>
    </select>
  </p>

  <p>
    <select class="with-border">
      <option>One</option>
      <option>Two</option>
      <option>Three</option>
    </select>
  </p>

</body>
</html>

In Windows XP appearance mode, you’ll see:

windows_xp_mode.png

And in Windows Classic appearance mode, you’ll see:

windows_classic_mode.png

Very, very strange. Apple must be drawing the form inputs pixel by pixel or something.

Leave a reply

(required)
(required) (will not be published)