Chrome: Element über css Übergangselement verschwindet bis Übergang

Question

Es gibt so viele Fragen über Chrome und CSS-Übergänge, die ich nicht sicher bin, ob dies zuvor gefragt wurde.

Meine Situation ist dies: Ich habe ein Layout, das im Grunde eine linke und rechte geteilte Seite ist. Eine Box mit Inhalten von der rechten Seite muss über dem Inhalt auf der linken Seite angezeigt werden (ich habe nichts zu sagen, das Design zwischen Desktop und Mobile macht dies notwendig). Das Problem tritt beim Übergang von Bildern auf der linken Seite auf. Die Bilder haben standardmäßig eine Deckkraft von 0 und werden angezeigt, indem eine .active-Klasse auf das entsprechende Bild angewendet wird, das seine Deckkraft auf 1 setzt. Ich benutze den css-Übergang, um es zu animieren.

Wenn die Animation stattfindet, verschwindet das Feld von der rechten Seite, bis der Übergang beendet ist. Die Bilder auf der linken Seite liegen nicht über der Oberfläche, es ist kein Hintergrundproblem, und egal, wie ich den Z-Index der linken und rechten Seite einstelle, verschwindet die rechte Seitenbox über dem linken Inhalt bis zum Übergang ist fertig.

Code example 
<div>blah</div> 
<div>another div</div> 
<p>meh</p> 

Hier ist ein Plunker um das Problem zu veranschaulichen (tritt nur in Chrome): http://plnkr.co/edit/G2Ohg01PodUKN1xi2izq?p=preview

(ernsthaft, Sie haben den Code enthalten, um Plunker zu verbinden, was ist der Sinn von Plunker dann?)

Keines der anderen Probleme, die ich gesehen habe, hat diese Situation angesprochen. Alles andere, was ich gesehen habe, war über Probleme mit den Übergangselementen selbst und nicht über Elemente in völlig anderen Codeblöcken, die über diese Übergangselemente positioniert sind.

Irgendwelche Ideen, wie dies überwunden werden kann, oder sollte ich den Designern nur sagen "damit umgehen"?

Answer 1

Ich werde nur einen Stich in die Dunkelheit nehmen und annehmen, dass es der weiße Text ist. Es ist das einzige, was auf der Seite verschwindet, wenn der Übergang in Kraft tritt.

Ihre Regel für .rightside .right-content hat einige CSS, die dieses Verhalten verursacht. Entfernen Sie es und Sie sollten gut gehen.

Ihr 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%; 
} 

Der .rightside Behälter wird sein Überlauf nicht erlaubt angezeigt werden, und die Übergänge sind in Ermangelung zu animieren.

Ihre Demonstration zurückgegeben:
http://plnkr.co/edit/5C2cCZqnB4x7MTdeCGAn?p=preview

Codepen Alternative:
http://codepen.io/anon/pen/BzEkEP