Question

I have a css element that has rounded edges and a border on one side, when I change the side the border & 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 & 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????

I am very confused by this, here is a jsfiddle link, any ideas how I can fix this?
http://jsfiddle.net/yhT5n/1/

Origonal source:

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

This is a bug in Chrome. Forcing the page to redraw (by zooming, or any other method) shows the red box in the right place.

I am not aware of any workaround for this, unfortunately.