html - Webkit中奇怪的CSS边框行为

我有一个css元素，该元素的一侧具有圆形边缘和边框，当我更改边框和圆形边缘的一侧时，它拒绝更新子元素的绝对位置，我不知道为什么？我已经在2.3 android浏览器和Google Chrome上对此进行了测试，两者都存在相同的问题。奇怪的是，当我右键单击并在谷歌浏览器中转到“检查元素”时，它会更新位置，并将绝对元素正确地向右对齐？

我对此感到非常困惑，这是一个jsfiddle链接，有什么想法可以解决吗？
http://jsfiddle.net/yhT5n/1/

原始资料：

HTML：

<div id="page" class="side_a">
    <div class="absl">&nbsp;</div>
</div>​

CSS：

#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;
}

JS：

$('#page').live('click', function() {
    $(this).removeClass('side_a').addClass('side_b');
});​

最佳答案

这是Chrome中的错误。强制页面重绘（通过缩放或其他方法）在正确的位置显示红色框。

不幸的是，我不知道有任何解决方法。

关于html - Webkit中奇怪的CSS边框行为，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/10809319/