Parent class change doesn't change background of border-radius element #242

splondike opened this Issue Sep 4, 2012 · 2 comments


None yet
2 participants

I have some code like the following:

<!doctype html>
<html lang="en">
<title>Parent class changes border-radius bug</title>
<script type="text/javascript">
window.onload = function() {
   var elem = document.getElementsByTagName("div")[0];
   elem.className = "green";
   // Uncomment these lines to make it work with PIE
   var child = elem.getElementsByTagName("span")[0];
<style type="text/css">
div span {
   padding: 10px;

   behavior: url('');
   /* Remove border-radius and it works */
   border-radius: 1px;
} span {
   background: green;
   color: white;
} span {
   background: red;
   color: black;
<div class="red"><span>I should be green</span></div>

PIE's border-radius support creates a red image initially for the span. I then change the class to green, but PIE doesn't notice because the class is on the parent element, not the one PIE is attached to. Notice that the text color has changed, because PIE isn't affecting this property.

If you hover the span, or perform an detach+attach, then everything works.

@lojjic lojjic closed this Sep 4, 2012

This comment has been minimized.

Show comment Hide comment

splondike Sep 4, 2012

Thanks lojjic, I didn't see that.

Thanks lojjic, I didn't see that.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment