Forcing WebKit browsers to notice CSS changes

I my CSS animation experiment – called Keyframes – I use JavaScript to dynamically update the <head> with new CSS styles.

During development, the following jQuery code worked absolutely fine.

$('head').append('<style type="text/css">...</style>');

The new styles were added to the head tag and the browser updated the animation as expected.

However, I have since updated to Mac OS X Lion (10.7) and although the styles are still added to the head of the HTML document, they have no effect. Only unticking and reticking a style checkbox in the Web Inspector caused the browser to “notice” the updated styles and repaint the screen with the new properties.

I don’t think this is a bug introduced by the Lion update because it has been reported by others. That’s not why I’m mentioning it here. I wanted to document the workaround because it took several hours to find an answer. Hopefully, this will help others who are as perplexed as I was.

A way of adding styles at runtime that definitely does work is:

var css = "body {colour: red;}";
var styletag = document.createElement("style");
styletag.setAttribute("type", "text/css");	
document.getElementsByTagName("head")[0].appendChild(styletag);
styletag.appendChild(document.createTextNode(css));

This has been tested in Safari 5.1 and Chrome 13.

Hope it helps!

Categories: CSS, Experiments

Leave a comment

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>