title: transition padding bug in Safari?
body: <p>I created a little title tab that on hover has its padding-right transition over 1sec. I've tested it in Chrome, Opera, IE10 and FF and it works as expected. Oddly enough in Safari it doesn't pick up the transition at all. In fact, it also shifts the element 1px to the right on hover. I haven't run into any specific case like this so wasn't sure if it is known bug or an oversight on my part. Here is the code:</p>
  
  <p>HTML</p>
  
  <p><code>&lt;h2 class="screen-button about-button"&gt;About&lt;/h2&gt;</code></p>
  
  <p>CSS</p>
  
  <pre><code>.screen-button {
      border-radius: 0 0 14px 14px;
      float: left;
      font-size: 2em;
      margin: 0;
      padding: .3em .5em .4em;
      position: relative;
      top: 0;
      left: 0;
      -webkit-transition: padding-right 1s ease-in-out;
      -moz-transition: padding-right 1s ease-in-out;
      -o-transition: padding-right 1s ease-in-out;
      -ms-transition: padding-right 1s ease-in-out;
      transition: padding-right 1s ease-in-out;
  }
  
  .screen-button:hover {
      padding-right: 91%;
  }
  
  .about-button {
      background: rgb(69,237,248);
      background: rgba(69,237,248, .8);
  }
  </code></pre>
  
  <p>Here is the Fiddle:
  <a href="http://jsfiddle.net/julsfelic/m429p/1/" rel="nofollow">http://jsfiddle.net/julsfelic/m429p/1/</a></p>