title: Safari and Chrome, position of rotated text goes haywire
body: <p>well, I normally find the answer to my questions here but this time I didn't so I will now ask my first one here! :)</p>
  
  <p>I have some rotated text on my page and it is positioned using position:absolute, like below:</p>
  
  <pre><code>.rotate-box .rotate-text{
      display: block;
      -webkit-transform: rotate(90deg);   
      -moz-transform: rotate(90deg);
      -ms-transform: rotate(90deg);
      -o-transform: rotate(90deg);
      transform: rotate(90deg);
      position: absolute;
      left: -45px;
      top: 170px;
  }
  
  &lt;div class="rotate-box"&gt;
      &lt;span class="rotate-text"&gt;Rotated text&lt;/span&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>This works fine on all browsers (with webkit) except for Safari and Chrome where the text is displayed about 90px lower than in the other browsers.</p>
  
  <p>To prevent this I have added:</p>
  
  <pre><code>@media screen and (-webkit-min-device-pixel-ratio:0){
      .rotate-text {top: 80px !important;}
  }
  </code></pre>
  
  <p>Now the text is in the correct place in all browsers but this doesn't feel right to me... Am I missing something here?</p>
  
  <p>I hate adding browser exception code, it tends to come back and bite you in the long run... :o</p>
  
  <p>Regards,
  Anders</p>