Chrome에서 2 이미지 div가 올바르게 작동하지 않는 CSS 슬라이드 쇼

Question

Firefox와 Chrome에서 다르게 표시되는 CSS 슬라이드 쇼가 있습니다. CSS에서 주목할만한 점은 하나의 "그림"은 두 개의 이미지가 포함 된 div입니다. 첫 번째 그림은 단순한 이미지이고 두 번째 그림은 배경 이미지와 더 작은 이미지가 포함 된 div입니다.

Firefox 57에서는 의도 한대로 슬라이드 쇼가 "올바르게"표시됩니다. 그러나 초기 표시시 크롬 62에서는 첫 번째 슬라이드 상단에 오버레이 이미지가 표시되지만 두 번째 슬라이드에는 오버레이 이미지가 나타납니다. 그러나 이것은 초기 디스플레이에서만 (또는 다시로드 할 때) 발생합니다. 슬라이드 쇼가 반복 될 때 오버레이 이미지없이 첫 번째 슬라이드가 표시됩니다.

내가 https://jsfiddle.net/glendeni/uwb13z87/ 에서 JSfiddle 예를 작업 제거 다운이 (가 ALA 크롬, ALA하지 파이어 폭스를 행동주의)

나는 요점은 다음과 CSS상의와

#figure-container { position: relative; } 
#top { 
    position: absolute; 
    top: 0; 
    right: 0; 
    z-index: 1; 
} 

에 생각 두 번째 그림 HTML

<figure> 
    <div id="figure-container"> 
    <img class="center" src="second_slide.jpg"> 
    <img id="top" src="second_slide_overlay.png"> 
    </div> 
</figure> 

일부 CSS 또는 자바 스크립트가 있으면 Chrome f를 방지 할 수 있는지 알고 싶습니다. ROM에서 처음으로 오버레이 이미지를 표시합니다. 현재 동작으로 인해 오버레이 이미지가 사용되지 않을 수 있습니다.

Answer 1

오버레이의 z- 색인이 첫 번째 및 두 번째 슬라이드 위에 표시되도록합니다. 그러나 2 초 지연 후 애니메이션이 시작되고 다음 번에 불투명도가 0으로 설정되기 때문에 첫 번째 슬라이드의 첫 번째 슬라이드 위에 만 표시됩니다.

.css-slideshow-header figure:nth-child(2) { 
    animation: xfade 4s 0s infinite; 
    position:relative; 
    z-index:2; 
}