Read more

CSS3 Pie: Element not properly redrawn

Tobias Kraze
March 21, 2011Software engineer at makandra GmbH

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

Illustration web development

Do you need DevOps-experts?

Your development team has a full backlog? No time for infrastructure architecture? Our DevOps team is ready to support you!

  • We build reliable cloud solutions with Infrastructure as code
  • We are experts in security, Linux and databases
  • We support your dev team to perform
Read more Show archive.org snapshot

Consider something like:

<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);

  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.

Posted by Tobias Kraze to makandra dev (2011-03-21 12:34)