I have encountered a puzzling issue:
http://jsfiddle.net/akosk/t2KvE/8/
HTML
<div id='base'>
<iframe id="myFrame" src="about:blank" frameborder="0" allowTransparency="true"></iframe>
</div>
<script id="content" type="text-html">
<html>
<head>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"/>
</head>
<body>
<h2>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus architecto quasi deleniti eius praesentium non officia culpa corporis officiis perferendis laudantium placeat excepturi. Voluptatum fuga mollitia reiciendis non aliquam dolorem!</h2>
</body>
</html>
</script>
JS
var myFrame = $("#myFrame");
var content = $("#content").html();
myFrame.contents().find('html').html(content);
CSS
iframe {
z-index:0;
height:100px;
}
#base {
background-color:red;
height:100px;
z-index:-1;
}
In Chrome & IE the background color of iframe is white instead of the wrapper's color (red). In Firefox it works fine.
Additionally when inspecting element in Chrome no HEAD and BODY nodes in iframe.
When I remove the css (bootstrap) then everything works fine. Somehow if I write anything into HEAD (fe. any css!) the transparency not work and HEAD/BODY tags disappears.
(I tried with * {background-color:transparent} in iframe also without success. I guess the problem is something else)
It's a perplexing mystery for me.
Can someone offer assistance?