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!