Strange behaviorwith iframes, title-cased CSS, and Chrome/Webkit

Strange behaviorwith iframes, title-cased CSS, and Chrome/Webkit

This may be the oddest issue I've seen in my entire life and it took me ages to narrow down the problem, but long story short - I'm working on a project that is using jQuery to write DOM nodes to an iframe and I found some odd behavior with CSS classes containing capitalized characters. I've narrowed it down to what seems to be an issue with jQuery's "append()" function for "$()"-wrapped HTML, and it affects all versions of jQuery 1.x and 2.x, Chromium/Webkit-based browsers only. See the following JSFiddle using Google Chrome:


Hopefully the comments are pretty self-explanatory, but as you can see I have a basic CSS class called ".TitleCase" that will color text red. I generate a simple "div" with this class name and add it to the DOM via "append($([html markup here]))". If I then try to append another DOM node containing that same class name to an "iframe", it breaks styles from that class in the parent DOM (in other words, the style definitions disappear). There are a bunch of odd workarounds for this that seem to suggest this might be a bug with jQuery:

- Applying a "setTimeout" to delay the iframe manipulation
- Giving the affected DOM element additional CSS class names or dummy attributes
- Resorting to lowercase CSS class names
- Manually removing and re-adding the class name to the DOM elements
- Passing a string directly to "append()"
- Using another non-jQuery method to generate the element and append it

I would love to get to the bottom of this so I can confirm if this is an issue with jQuery or chromium/webkit in particular and direct the issue to the proper folks. Let me know if you need any more details and I'll be glad to provide them.