Chrome & Safari opacity/preserve-3d issue

Setting the opacity on the article will affect the h2 elements in Chrome and Safari (if preserve-3d is used)

HTML

<section>
    <article>
         <h2 id="one">Title 1</h2> 
         <h2 id="two">Title 2</h2>
         <h2 id="three">Title 3</h2> 
    </article>
</section>

CSS

/* Setting the opacity on the article will affect the h2 elements in Chrome and Safari (if preserve-3d is used) */

section {
    -webkit-perspective: 1200px;
    perspective: 1200px;
    -webkit-perspective-origin: 100% 50%;
    perspective-origin: 100% 50%;
}
article {
    position: relative;
    opacity: 0.9;
    width: 500px;
    height: 300px;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
}
h2 {
    margin: 0;
    width: 100%;
    height: 100%;
    color: #fff;
}
#one {
    -webkit-transform: scale3d(0.75, 0.75, 1);
    transform: scale3d(0.75, 0.75, 1);
    background: green;
}
#two {
    -webkit-transform: translate3d(0, -100%, -60px) scale3d(0.75, 0.75, 1);
    transform: translate3d(0, -100%, -60px) scale3d(0.75, 0.75, 1);
    background: red;
}
#three {
    -webkit-transform: translate3d(0, -200%, -120px) scale3d(0.75, 0.75, 1);
    transform: translate3d(0, -200%, -120px) scale3d(0.75, 0.75, 1);
    background: blue;
}