Flexlider幻灯片的绝对定位内容在移动iOS Safari和Chrome和桌面游戏中消失，但不在桌面上消失

Question

我正在使用flexslider，但我不一定知道这是一个flexslider问题，还是只知道我如何定位每张幻灯片的内容。 基本上，我有一个左侧的文本块，每张幻灯片上有一个右侧图像...当这对移动设备做出响应时，我使用绝对定位垂直堆叠它们。 这似乎是在桌面上预览时的工作文件，但是当我将它加载到我的iphone或Safari上时，每张幻灯片的内容都会消失。

我不能为我的生活弄清楚为什么会这样，因为它在镀铬上似乎很好。

要查看该网站，请单击以下：

toddpadwick.co.uk/main-index.html

任何人都可以帮忙吗？我真的在这里挣扎！

每张幻灯片的内容如下:(我为了这篇文章的目的简化了它）

<ul class="slides">
    <li><!-- slide-->
        <div class="caption"><!-- THIS IS THE LEFT SIDE TEXT BOX -->
            <div class="title">
                lorum ipsum dolar sit amet
            </div><!-- END TITLE -->
        </div><!-- END CAPTION -->

        <div class="teaser"><!-- THIS IS THE RIGHT HAND SIDE IMAGE -->
            <div class="image" style="background-image:url(teasers/image.png);"></div>
        </div><!-- END TEASER -->
    </li><!-- end slide-->
</ul><!-- END SLIDES-->

这是CSS

.flexslider .slides, .flexslider .slides > li {
    height: 100%;
}

.flexslider .slides li {
    height:100%;
    position: relative;
}




.slides li .caption {
    -webkit-transition: all 0.3s ease-out 0.7s;
    transition:all 0.3s ease-out 0.7s;
    height:100%;
    left:0;
    width:40%;
    opacity:0.4;
    display: table;
    float: left;
}


.slides li.flex-active-slide .caption {
    opacity:1;
}

.slides li .caption .title {
    vertical-align: middle;
    display: table-cell;
    width: 100%;
    padding-left:100px;
}


.slides li .teaser {
    -webkit-transition: all 0.3s ease-in 0.6s;
    transition:all 0.3s ease-in 0.6s;
    width:60%;
    height:90%;
    right:0;
    top:0;
    display:table;
    padding:20px 60px 40px 20px;
    position: absolute;

}

.slides li .teaser .image {
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    display: table-cell;
    vertical-align: middle;
}

toddpadwick.co.uk/main-index.html