Posted over 8 years ago. Visible to the public.

CSS3 Pie: Element not properly redrawn

Pie sometimes does not properly redraw elements upon changes. This often happens when the change comes from somewhere further up the DOM.

Consider something like:

Copy
<ul> <li class="active"><div class="content">Active element</div></li> <li class="inactive"><div class="content">Inactive element</div></li> </ul>

with CSS
li .content {
-webkit-box-shadow: #666 0px 2px 3px;
-moz-box-shadow: #666 0px 2px 3px;
box-shadow: #666 0px 2px 3px;
behavior: url(/PIE.htc);

Copy
background: white; } li.active .content { background: red; }

If you now use JavaScript to add the class .active to another li, the contained .content (whose background should have changed) is not redrawn. If you were to add the .active class to the .content div (and change your CSS accordingly), it would work.

As a workaround, you can either touch the .content div's CSS in any way (by adding a bogus class for example) or change your markup.

Once an application no longer requires constant development, it needs periodic maintenance for stable and secure operation. makandra offers monthly maintenance contracts that let you focus on your business while we make sure the lights stay on.

Owner of this card:

Avatar
Tobias Kraze
Last edit:
almost 7 years ago
Keywords:
refresh, bug, IE, Internet, Explorer
About this deck:
We are makandra and do test-driven, agile Ruby on Rails software development.
License for source code
Posted by Tobias Kraze to makandra dev
This website uses cookies to improve usability and analyze traffic.
Accept or learn more