Box-shadow assigned by onCLick javascript event

• Component: CSS
• Status: RESOLVED DUPLICATE

[Pixelmedia]

I've created a simple DIV with a onclick event that change his class to give him the box-shadow when a user click on it.

this is the CSS style:

div.boxShadowOff, div.boxShadowOn {
width:100px;
height:200px;
position:absolute;
top:100px;
left:200px;
background: #FF8000;
padding: 5px 5px 5px 15px;
-webkit-border-radius: 5px;
float:left;
}

div.boxShadowOn {
-webkit-box-shadow: 5px 5px 10px #888;
}

and this is the DIV:
<div class="boxShadowOff" onclick="this.className='boxShadowOn'"></div>

When I click on the DIV he changes the class but WebKit doesn't render the box-shadow. The box-shadow is rendered only if I resize the browser window.

Try to see it.

Bug 12729 basically deals with box-shadow invalidation. Maybe it should be retitled to make it easier for people to find it.

*** This bug has been marked as a duplicate of 12729 ***