negative effect on opacity transition inside transformed element - html

Question

Please, try this in action. I change opacity on one element and this affects the look of another static element which contains text. It's hard to explain, just try and tell me how can I avoid this effect. It seems to me that this happens only when using chain of transforms.
http://jsfiddle.net/6p8jf3d3/
HTML:
<div class="outer">
<div class="inner"></div>
<div class="text">Hello</div>
</div>
CSS:
div.outer {
position: absolute;
top: 100px;
left: 50px;
width: 200px;
height: 100px;
border: 1px solid black;
-ms-transform: skew(-45deg);
-webkit-transform: skew(-45deg);
transform: skew(-45deg);
}
div.inner {
width: 100%;
height: 100%;
background-color: #99CCFF;
opacity: 0;
-webkit-transition: all 0.5s;
transition: all 0.5s;
}
div.text {
position: absolute;
top: 0;
left: 0;
font-size: 2em;
font-weight: bold;
-ms-transform: skew(45deg);
-webkit-transform: skew(45deg);
transform: skew(45deg);
}
div.outer:hover div.inner {
opacity: 1;
}

Answer 1

Adding transform: translateZ(0); to div.inner will stop the hopping/jarring effect of the transition, but it keeps the stack fuzz on it. It's better, but not perfect:
Example Fiddle

Answer 2

So, I've experimented a bit (not with this jsfiddle but with larger example) and found solution for Chrome, Safari, Opera and Firefox. Combination of translateZ, backface-visibility and transform-style. jsfiddle.net/6p8jf3d3/4
CSS:
div.outer {
position: absolute;
top: 100px;
left: 50px;
width: 200px;
height: 100px;
border: 1px solid black;
-ms-transform: skew(-45deg);
-webkit-transform: skew(-45deg);
transform: skew(-45deg);
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
div.inner {
width: 100%;
height: 100%;
background-color: #99CCFF;
opacity: 0;
-webkit-transition: all 0.5s;
transition: all 0.5s;
-ms-transform: translateZ(0);
-webkit-transform: translateZ(0);
transform: translateZ(0);
}
div.text {
position: absolute;
top: 0;
left: 0;
font-size: 2em;
font-weight: bold;
-ms-transform: skew(45deg);
-webkit-transform: skew(45deg);
transform: skew(45deg);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
div.outer:hover div.inner {
opacity: 1;
}