CSS3完整图像背景无法在Firefox for Mac或IE中使用

Question

目标：我一直在玩采用CSS3整页背景图片滑块。

问题1：在Firefox上（仅限Mac计算机（？）），背景不会覆盖页面的整个高度。

问题2：在IE上，背景不会改变图像。它仅保留在原始图像上。

JSFiddle： http://jsfiddle.net/ns7hq40a/

HTML：

<div id="CSS3Slideshow">
    <img class="img1" src="http://###.co.uk/graphics/fullpage/about.jpg" >
    <img class="img2" src="http://###.uk/graphics/fullpage/whatwedo.jpg" >
    <img class="img3" src="http://###.uk/graphics/fullpage/interior.jpg" >
    <img class="img4" src="http://###.co.uk/graphics/fullpage/criteria.jpg" >
    <img class="img5" src="http://###.co.uk/graphics/fullpage/contact.jpg" >
    <img class="img6" src="http://###.co.uk/graphics/fullpage/about.jpg" >
</div>

CSS：

.frame{
height: 100%;
max-height: 100vh;
min-height: 100vh;
overflow:hidden;
width:100%;
position: relative;
}

@-webkit-keyframes fade {
0% { opacity:0; -webkit-transform:translate(0px,0px); }
5% { opacity:1;  }
25% { opacity:1;  }
30% { opacity:0; -webkit-transform:translate(0px,0px); }
}

@-webkit-keyframes fade_start_opaque {
0% { opacity:0; -webkit-transform:translate(0px,0px); }
5% { opacity:1;  }
25% { opacity:1;  }
30% { opacity:0; -webkit-transform:translate(0px,0px); }
}

@-webkit-keyframes fade_start_opaque_alt {
0% { opacity:0; -webkit-transform:translate(0px,0px); }
// 3% { opacity:1;  }
5% { opacity:1;  }
25% { opacity:1;  }
30% { opacity:0; -webkit-transform:translate(0px,0px); }
}

@-moz-keyframes fade {
0% { opacity:0; -webkit-transform:translate(0px,0px); }
5% { opacity:1;  }
25% { opacity:1;  }
30% { opacity:0; -moz-transform:translate(0px,0px); }
}
@-moz-keyframes fade_start_opaque {
0% { opacity:0; -webkit-transform:translate(0px,0px); }
5% { opacity:1;  }
25% { opacity:1;  }
30% { opacity:0; -moz-transform:translate(0px,0px); }
}

#CSS3Slideshow, #CSS3Slideshow imgc{
position:absolute;
}

#CSS3Slideshow  {
position : fixed ;
top : 0 ;
left : 0 ;
z-index : -100 ;
width: 100%;
min-height: 100%;
display : block ;
}
#CSS3Slideshow img
{
top: 0 ;
left: 0;
min-height : 100%;
width: 100%;
opacity:0;
display : block ;
}

/* 20s : 20s; // MUST BE A MULTIPLE OF THE NUMBER OF SLIDES, USUALLY 4 */

#CSS3Slideshow .img1 {
opacity: 1;
-webkit-animation:fade_start_opaque_alt 20s linear infinite;
-moz-animation:fade_start_opaque 20s linear infinite;
-webkit-animation-delay:0s; -moz-animation-delay:0s;
}

#CSS3Slideshow .img2 {
-webkit-animation:fade 20s linear infinite;
-moz-animation:fade 20s linear infinite;
-webkit-animation-delay:5s; -moz-animation-delay:5s;
}

#CSS3Slideshow .img3 {
-webkit-animation:fade 20s linear infinite;
-moz-animation:fade 20s linear infinite;
-webkit-animation-delay:10s; -moz-animation-delay:10s;
}

#CSS3Slideshow .img4 {
-webkit-animation:fade 20s linear infinite;
-moz-animation:fade 20s linear infinite;
-webkit-animation-delay:15s; -moz-animation-delay:15s;
}

#CSS3Slideshow .img5 {
-webkit-animation:fade 20s linear infinite;
-moz-animation:fade 20s linear infinite;
-webkit-animation-delay:20s; -moz-animation-delay:20s;
}

#CSS3Slideshow .img6 {
-webkit-animation:fade 20s linear infinite;
-moz-animation:fade 20s linear infinite;
-webkit-animation-delay:25s; -moz-animation-delay:25s;
}

非常感谢您的帮助。 →