Css 动态电子邮件构建iOS9问题

我正在为我们的电子邮件构建一个动态旋转木马模块，但在iOS9设备上查看时，我遇到了一些奇怪的问题，幻灯片中的图像缩小以适合旋转木马容器，或者石蕊测试显示了3和2个较小的图像堆栈。在浏览器（显然）和iOS10设备中工作良好。我猜这是一个CSS支持问题，但我似乎找不到任何关于什么是/不支持的细节

iOS9 iPhone 6的石蕊屏幕抓取+

JS小提琴示例：

@媒体屏幕和（-webkit最小设备像素比：1），（最小——moz设备像素比：1）{
.撤退{
显示：无！重要；
}
.旋转木马{
显示：块！重要；
最大高度：无！重要；
可见性：可见！重要；
宽度：100%；
最大宽度：600px；
高度：自动；
保证金：0自动；
}
#旋转木马{
保证金：20px自动；
宽度：100%；
高度：250px；
位置：相对位置；
溢出：隐藏；
}
#旋转木马主输入{
显示：无；
}
#旋转滑道{
宽度：100%；
高度：250px；
}
.幻灯片{
宽度：600px；
高度：250px；
浮动：左；
}
/*显示正确图像的图像容器div的位置*/
#幻灯片1：选中~#旋转木马幻灯片。内部{左：0；}
#幻灯片2：选中~#旋转木马滑块。内部{左：-100%；}
#幻灯片3：选中~#旋转木马滑块。内部{左：-200%；}
#幻灯片4：选中~#旋转木马滑块。内部{左：-300%；}
#转盘滑道组{
宽度：100%；
}
/*大小图像容器*/
#旋转滑轨。内部{
宽度：400%；
显示：内联块；
位置：绝对位置；
排名：0；
}
/*控制容器的位置和尺寸*/
#控制{
位置：绝对位置；
顶部：0px；
宽度：100%；
高度：250px；
}
/*控制按钮的尺寸。隐藏当前视图不需要的尺寸*/
#控件标签{
显示：无；
宽度：5%；
高度：250px；
}
/*下一个控件-将幻灯片标签显示在当前显示的控件的右侧*/
#幻灯片1：选中~#控件标签：第n个子项（2），
#幻灯片2：选中~#控件标签：第n个子项（3），
#幻灯片3：选中~#控件标签：第n个子项（4），
#幻灯片4：选中~#控件标签：第n个子项（1）{
背景：url（'images/next.png'）不重复；
背景位置：中心；
浮动：对；
显示：块；
背景色：#bdbd；
不透明度：0.7；
}
/*上一个控件-在当前显示的幻灯片左侧显示幻灯片标签*/
#幻灯片1：选中~#控件标签：第n个子项（4），
#幻灯片2：选中~#控件标签：第n个子项（1），
#幻灯片3：选中~#控件标签：第n个子项（2），
#幻灯片4：选中~#控件标签：第n个子项（3）{
背景：url（'images/prev.png'）不重复；
背景位置：中心；
浮动：左；
显示：块；
背景色：#bdbd；
不透明度：0.7；
}
/*控件的不透明度*/
#控件标签：悬停{
不透明度：0.9！重要；
}
/*动画*/
/*滑动运动*/
#旋转滑轨。内部{
-webkit转换：translateZ（0）；
-webkit过渡：所有0.5s易入易出；
-moz转换：所有0.5s的易入易出；
-ms过渡：所有0.5s的缓进缓出；
-o型过渡：所有0.5s缓进缓出；
过渡：所有0.5s缓进缓出；
}
#旋转木马{
-webkit转换：translateZ（0）；
-webkit过渡：所有0.5s都可以轻松过渡；
-moz过渡：所有0.5s的缓变；
-o型过渡：所有0.5s缓解；
过渡：所有0.5s缓解；
}
/*控件上的淡入淡出效果*/
#控件标签{
-webkit转换：translateZ（0）；
-webkit过渡：不透明度0.2秒，降低；
-moz过渡：不透明度0.2s，减缓；
-o型过渡：不透明度0.2s，降低；
过渡：不透明度为0.2s；
}
}
/*移动设置美国大众单位测试响应性*/
@媒体屏幕和屏幕（最大宽度：414px）{
.旋转木马{
宽度：100%！重要；
高度：172px！重要；
}
#旋转木马{
宽度：100%！重要；
高度：172px！重要；
}
#旋转滑道{
宽度：100%！重要；
高度：172px！重要；
}
.幻灯片{
宽度：414px！重要；
高度：172px！重要；
}
/*在线发布图像*/
#幻灯片1：选中~#旋转木马幻灯片。内部{左：0！重要；}
#幻灯片2：选中~#旋转木马滑块。内部{左：-414px！重要；}
#幻灯片3：选中~#旋转木马滑块。内部{左：-818px！重要；}
#幻灯片4：选中~#旋转木马幻灯片。内部{左：-1232px！重要；}
/*根据视口宽度调整图像大小*/
.幻灯片图像{
宽度：414px！重要；
}
/*用于图像的容器div上的5x视口*/
#旋转滑轨。内部{
宽度：400%！重要；
}
/*左/右控件的尺寸-也可能需要单独的查询来控制不同设备上的高度*/
#控制{
宽度：100%！重要；
高度：172px！重要；
}
/*左/右控件的尺寸-也可能需要单独的查询来控制不同设备上的高度*/
#控件标签{
宽度：5%！重要；
高度：172px！重要；
}
}
/*屏幕大小特定的媒体查询*/
/*iPh
    <div class="fallback" style="display:block;">
        <img src="http://placehold.it/600x250/4286f4?text=Fallback+Content" alt="">
    </div>

    <div class="carouselWrapper" style="display:none; max-height:0; visibility:hidden;">

        <div id="carouselMain">
          <input checked="checked" name="carouselMain" id="slide1" type="radio">
          <input name="carouselMain" id="slide2" type="radio">
          <input name="carouselMain" id="slide3" type="radio">
          <input name="carouselMain" id="slide4" type="radio">

          <div id="carouselSlides">
              <div class="inner">
                <div class="slide">
                  <img src="http://placehold.it/600x250/4286f4?text=Slide1"> 
                </div>
                <div class="slide">
                  <img src="http://placehold.it/600x250/42f4b0?text=Slide2"> </div>
                <div class="slide">
                  <img src="http://placehold.it/600x250/d15353?text=Slide3"> </div>
                <div class="slide">
                  <img src="http://placehold.it/600x250/8f3daf?text=Slide4"> </div>
              </div>
          </div>

          <div id="controls">
            <label for="slide1"></label>
            <label for="slide2"></label>
            <label for="slide3"></label>
            <label for="slide4"></label>
          </div>

        </div>    

    </div>
    @media screen and (-webkit-min-device-pixel-ratio: 1), (min--moz-device-pixel-ratio: 1) {
    .fallback {
        display:none !important;    
    }

    .carouselWrapper {
        display:block !important;
        max-height:none !important;
        visibility:visible !important;
        width:100%;
        max-width:600px;
        height: auto;
        margin: 0 auto;
    }

    #carouselMain {
        margin: 20px auto;
        width:100%;
        height:250px;
        position: relative;
        overflow: hidden;
    }

    #carouselMain input {
        display: none;
    }

    #carouselSlides {
        width:100%;
        height:250px;
    }

    .slide {
        width: 600px;
        height: 250px;
        float: left;
    }

    /* position of image container div to display correct image */
    #slide1:checked ~ #carouselSlides .inner { left:0; }
    #slide2:checked ~ #carouselSlides .inner { left:-100%; }
    #slide3:checked ~ #carouselSlides .inner { left:-200%; }
    #slide4:checked ~ #carouselSlides .inner { left:-300%; }

    #carouselSlides div img {
        width: 100%;
    }

    /* sizes image container */
    #carouselSlides .inner {
        width: 400%;
        display: inline-block;
        position: absolute;
        top: 0;
    }

    /* position and dimension of control container */
    #controls {
        position: absolute;
        top: 0px;
        width: 100%;
        height: 250px;
    }

    /* dimensions of control buttons. hides that aren't needed for current view*/
    #controls label { 
        display: none;
        width: 5%;
        height: 250px;

    }

    /* Next control - displays label for slide to right of one currently being displayed */
    #slide1:checked ~ #controls label:nth-child(2), 
    #slide2:checked ~ #controls label:nth-child(3), 
    #slide3:checked ~ #controls label:nth-child(4), 
    #slide4:checked ~ #controls label:nth-child(1) {
        background: url('images/next.png') no-repeat;
        background-position:center;
        float: right;
        display: block;
        background-color:#BDBDBD;
        opacity: 0.7;
    }

    /* Previous control - displays label for slide to left of one currently being displayed */
    #slide1:checked ~ #controls label:nth-child(4),
    #slide2:checked ~ #controls label:nth-child(1),
    #slide3:checked ~ #controls label:nth-child(2),
    #slide4:checked ~ #controls label:nth-child(3) {
        background: url('images/prev.png') no-repeat;
        background-position:center;
        float: left;
        display: block;
        background-color:#BDBDBD;
        opacity: 0.7;
    }

    /* opacity of controls */
    #controls label:hover {
        opacity:0.9 !important;
    }


    /* Animations */

    /* slide movement */
    #carouselSlides .inner {
        -webkit-transform: translateZ(0);
        -webkit-transition: all 0.5s ease-in-out; 
        -moz-transition: all 0.5s ease-in-out; 
        -ms-transition: all 0.5s ease-in-out; 
         -o-transition: all 0.5s ease-in-out; 
            transition: all 0.5s ease-in-out; 
    }

    #carouselMain {
        -webkit-transform: translateZ(0);
        -webkit-transition: all 0.5s ease-out;
        -moz-transition: all 0.5s ease-out;
        -o-transition: all 0.5s ease-out;
        transition: all 0.5s ease-out;
    }

    /* fade effect on controls */
    #controls label {
        -webkit-transform: translateZ(0);
        -webkit-transition: opacity 0.2s ease-out;
        -moz-transition: opacity 0.2s ease-out;
        -o-transition: opacity 0.2s ease-out;
        transition: opacity 0.2s ease-out;
    }

}

/* Mobile settings us vw units to test out responisivness */

@media screen and (max-width:414px)  {
    .carouselWrapper {
        width:100% !important;
        height: 172px !important;
    }

    #carouselMain {
        width:100% !important;
        height: 172px !important;
    }

    #carouselSlides {
        width:100% !important;
        height:172px !important;
    }

    .slide {
       width: 414px !important;
       height: 172px !important;
    }

    /* postions images inline */
    #slide1:checked ~ #carouselSlides .inner { left:0 !important; }
    #slide2:checked ~ #carouselSlides .inner { left:-414px !important; }
    #slide3:checked ~ #carouselSlides .inner { left:-818px !important; }
    #slide4:checked ~ #carouselSlides .inner { left:-1232px !important; }

    /* size images to viewport width */
    .slide img {
        width: 414px !important;
    }

    /* 5x viewport on container div for images*/
    #carouselSlides .inner {
        width: 400% !important;
    }

    /* dimensions of left/right controls - also may need individual queries to control height on different devices */
    #controls {
        width: 100% !important;
        height: 172px !important;
    }

    /* dimensions of left/right controls - also may need individual queries to control height on different devices */
    #controls label { 
        width: 5% !important;
        height: 172px !important;   
    }

}

/* SCREEN SIZE SPECIFIC MEDIA QUERIES */

/* iPhone 6/7 */
@media screen and (max-width:375px) {
    .carouselWrapper {
        height: 156px !important;
    }

    #carouselMain {
        height: 156px !important;
    }

    #carouselSlides {
        height:156px !important;
    }

    .slide {
       width: 375px !important;
       height: 156px !important;
    }

    /* postions images inline */
    #slide1:checked ~ #carouselSlides .inner { left:0 !important; }
    #slide2:checked ~ #carouselSlides .inner { left:-375px !important; }
    #slide3:checked ~ #carouselSlides .inner { left:-750px !important; }
    #slide4:checked ~ #carouselSlides .inner { left:-1125px !important; }

    /* size images to viewport width */
    .slide img {
        width: 375px !important;
    }

    /* dimensions of left/right controls - also may need individual queries to control height on different devices */
    #controls {
        height: 156px !important;
    }

    /* dimensions of left/right controls - also may need individual queries to control height on different devices */
    #controls label { 
        width: 5% !important;
        height: 156px !important;   
    }       
}

/* iPhone 5 */
@media screen and (max-width:320px) {
    .carouselWrapper {
        height: 133px !important;
    }

    #carouselMain {
        height: 133px !important;
    }

    #carouselSlides {
        height:133px !important;
    }

    .slide {
       width: 320px !important;
       height: 133px !important;
    }

    /* postions images inline */
    #slide1:checked ~ #carouselSlides .inner { left:0 !important; }
    #slide2:checked ~ #carouselSlides .inner { left:-320px !important; }
    #slide3:checked ~ #carouselSlides .inner { left:-640px !important; }
    #slide4:checked ~ #carouselSlides .inner { left:-960px !important; }

    /* size images to viewport width */
    .slide img {
        width: 320px !important;
    }
    /* dimensions of left/right controls - also may need individual queries to control height on different devices */
    #controls {
        height: 133px !important;
    }

    /* dimensions of left/right controls - also may need individual queries to control height on different devices */
    #controls label { 
        width: 5% !important;
        height: 133px !important;   
    }
}