Chrome: element above css transitioning element disappears until transition finishes - css

Question

There are so many questions about Chrome and css transitions that I'm not sure if this has been asked before.
My situation is this: I have a layout that is basically a left and right split page. A box of content from the right side needs to be displayed over the content on the left side (I have no say in this, the design between desktop and mobile makes this necessary). The issue comes when transitioning images that are in the left side. The images are 0 opacity by default and displayed by applying an .active class to the appropriate image that sets its opacity to 1. I'm using css transition to animate it.
When the animation takes place, the box from the right side disappears until the transition is finished. The images in the left side do not layer over the top of it, it's not a background issue, and no matter what I set the z-index of the left and right side the right side box positioned over the left content disappears until the transition is finished.
Code example
<div>blah</div>
<div>another div</div>
<p>meh</p>
Here's a plunker to illustrate the issue (only occurs in Chrome): http://plnkr.co/edit/G2Ohg01PodUKN1xi2izq?p=preview
(seriously, you have to include code to link to plunker, what's the point of plunker then?)
None of the other issues I've seen have addressed this situation. Everything else I've seen has been about issues with the transitioning elements themselves and not elements in completely different code blocks positioned over those transitioning elements.
Any ideas on how this can be overcome or should I just tell the designers "deal with it"?

Answer 1

I'm just gonna take a stab in the dark and assume it's the white text. It's the only thing that's disappearing on the page when the transition is enacted.
your rule for .rightside .right-content has some CSS that's causing this behavior. Remove it and you should be good to go.
Your code:
.rightside .right-content {
position: relative;
z-index: 1;
padding: 1em 1em 3em;
/* overflow:hidden; ------------- Commented this.*/
float: left;
box-sizing: border-box;
width: 100%;
}
The .rightside container isn't allowing its overflow to be displayed, and the transitions are failing to animate this.
Your demonstration returned:
http://plnkr.co/edit/5C2cCZqnB4x7MTdeCGAn?p=preview
Codepen Alternative:
http://codepen.io/anon/pen/BzEkEP