webkit中奇怪的CSS边界行为

Question

我有一个css元素，它的边缘是圆形的，一边是边框，当我更改边框和边框时圆角边缘打开，它拒绝更新子元素的绝对位置，我不明白为什么？我已经在2.3 android浏览器＆amp;上测试了这个谷歌浏览器，都表现出同样的问题。奇怪的是，当我右键单击并在谷歌浏览器中去“检查元素”时，它会更新位置，并将绝对元素正确地向右移动????

我对此非常困惑，这里有一个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');
});​

Answer 1

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

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

Answer 2

破碎：http://jsfiddle.net/yhT5n/4/

正如这个小提琴所见，问题与圆角或虚线样式无关：

#page.a{ border-right:10px solid }
#page.b{ border-left: 10px solid }

已修复：http://jsfiddle.net/yhT5n/5/

但是，您可以通过在切换时更改边框大小来“修复”它：

#page.a{ border-right:10px solid }
#page.b{ border-left: 11px solid }

再次破碎：http://jsfiddle.net/yhT5n/6/

如果我们将框大小调整模型更改为border-box，则上述“修复”不再有效：

#page  { box-sizing:  border-box }
#page.a{ border-right:10px solid }
#page.b{ border-left: 11px solid }

替代修复：http://jsfiddle.net/yhT5n/7/

这表明通过调整对象大小来触发修复。因此，您可以更改宽度以触发正确的行为：

#page  { box-sizing:  border-box }
#page.a{ border-right:10px solid; width:100px }
#page.b{ border-left: 10px solid; width:101px }

...甚至change the height：

#page  { box-sizing:  border-box; height:150px }
#page.a{ border-right:10px solid; }
#page.b{ border-left: 10px solid; height:151px }