title: Strange css border behaviour in webkit
body: <p>I have a css element that has rounded edges and a border on one side, when I change the side the border &amp; rounded edges are on, it refuses to update the absolute position of a child element and I have no idea why? I have tested this on the 2.3 android browser &amp; Google Chrome, both exhibit the same problem. The strange thing is, when I right click and go 'Inspect Element' in google chrome, It updates the position, and snaps the absolute element correctly to the right????</p>
  
  <p>I am very confused by this, here is a jsfiddle link, any ideas how I can fix this?
  <a href="http://jsfiddle.net/yhT5n/1/" rel="nofollow">http://jsfiddle.net/yhT5n/1/</a></p>
  
  <p>Origonal source:</p>
  
  <p>Html:</p>
  
  <pre><code>&lt;div id="page" class="side_a"&gt;
      &lt;div class="absl"&gt;&amp;nbsp;&lt;/div&gt;
  &lt;/div&gt;​
  </code></pre>
  
  <p>Css:</p>
  
  <pre><code>#page{
      margin:30px;
      position:relative;
      display:block;
      width:100px;
      height:150px;
      background-color:gray;
      z-index:10003;
      -webkit-transition-property: width, height;  
      -webkit-transition-duration: 0.5s;
      border-radius: 15px;-moz-border-radius: 15px;    
      border-width:3px;
      border-top-style:none;
      border-right-style:none;
      border-bottom-style:none;
      border-left-style:none;
      border-color:#000;
  }
  
  #page.side_a{
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
      border-right-style:dashed;    
  }
  #page.side_b{
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
      border-left-style:dashed;
  }
  .absl{
      position:absolute;
      right:0px;
      top:20px;
      width:20px;
      height:20px;
      background:red;
  }
  </code></pre>
  
  <p>​JS:</p>
  
  <pre><code>$('#page').live('click', function() {
      $(this).removeClass('side_a').addClass('side_b');
  });​
  </code></pre>