Weird behavior when combining opacity & z-index: -1

dabblet.css

/**
 * Weird behavior when combining opacity & z-index: -1
 */

div {
	position: relative;
	display: inline-block;
	vertical-align: middle;
	width: 200px; height: 200px;
	background: yellowgreen;
}

div > div {
	position:absolute; 
	z-index: -1;
	width: 200px; height: 200px;
	background: #d00;
}

.opacity {
	opacity: 0.9;
}

.transform {
	transform: rotate(0);
}

dabblet.html

Normal: 
<div>
	<div></div>
</div>

With opacity:
<div class="opacity">
	<div></div>
</div>

With transform:
<div class="transform">
	<div></div>
</div>

settings.json

{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}