title: Android 2.3 Browser Fails to Render some CSS3 2D Transforms
body: <p>I'm having trouble getting CSS3 2D Transforms to work in Android 2.3 with any browser that uses the default webkit engine (e.g. default browser, Dolphin HD, Amazon Kindle Fire Silk browser, etc). The Android 2.3 webkit engine does support 2D transforms and I have been able to get some sites with 2D transforms to render correctly, just not my site!</p>
  
  <p><strong>Does anyone know any issue in Android 2.3 which may cause a conflict with 2D transforms? Alternatively, is there a good way to just target css for browsers using the Android 2.3 webkit rendering engine?</strong> While I am using Modernizr, in this context it does not work because the Android 2.3 browsers test positive for 2D transforms.</p>
  
  <p>Here's my site: <a href="http://StevenGerner.com">http://StevenGerner.com</a>. On the front page, I am rotating two elements -90deg (the site title and an h2 element) and neither will rotate on android 2.3 browsers. I've even tried other css transforms, but nothing seems to transform. If I strip the entire page down to just the basic, then the transform works flawlessly, so there's probably some other conflict on my site, I just can't figure out what! Here's the CSS specific to the transforms:</p>
  
  <pre><code>//Applied to the h2 element which says 'howdy' at the top of the page
      #about-front h2 {
          display: inline-block;
          float: left;
          -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=4)"\9;
          -webkit-transform: rotate(-90deg);
          -webkit-transform-origin: 170% 170%;
          -moz-transform: rotate(-90deg);
          -moz-transform-origin: 170% 170%;
          -ms-transform: rotate(-90deg);
          -ms-transform-origin: 170% 170%;
          -o-transform: rotate(-90deg);
          -o-transform-origin: 170% 170%;
          transform: rotate(-90deg);
          transform-origin: 170% 170%;
          width: 1em;
          text-shadow: -1px 0 #777, 0 2px #333, 2px 0 #333, 0 -1px #777;
      }
  
  //Applied to the site title with a media query between 500px and 750px
      div#site_name {
          display: block;
          line-height: 0.85em;
          -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=4)"\9;
          -webkit-transform: rotate(-90deg);
          -webkit-transform-origin: 160% 130%;
          -moz-transform: rotate(-90deg);
          -moz-transform-origin: 160% 130%;
          -ms-transform: rotate(-90deg);
          -ms-transform-origin: 160% 130%;
          -o-transform: rotate(-90deg);
          -ms-transform-origin: 160% 130%;
          transform: rotate(-90deg);
          transform-origin: 160% 130%;
  }
  </code></pre>
  
  <p>The issue may also apply to Android 2.2; however, I do not currently have any 2.2 devices to test.</p>
  
  <p>I'd really appreciate any thoughts, suggestions, and advice! This is driving me nuts!</p>