滑块上的 Flexslider 标题不设置动画（仅限 chrome）答案

【问题标题】：Flexslider caption over slider don't animate (only chrome)滑块上的 Flexslider 标题不设置动画（仅限 chrome）
【发布时间】：2016-03-15 04:43:55
【问题描述】：

我正在使用 flexslider 来制作我的主页滑块。

我的字幕有问题。当我更改幻灯片时，每张幻灯片的标题都会在幻灯片停止后出现，而不是在从一张幻灯片更改到另一张幻灯片期间出现。

我的css代码：

.front-page-slider{
position: relative;
width: 900px;
padding: 0;
margin-top: 28px;
}

.flexslider ul.slides > li{
position: relative;
}


.flex-caption{
position:absolute;
width: 235px;
height: 445px;
z-index: 50;
top: 25px;
right: 25px;
background-color: #CDCDCD;
}

html

<div class="container front-page-slider">
<div class="flexslider">
    <div class="flex-viewport" style="overflow: hidden; position: relative;">
        <ul class="slides" style="width: 1800%; -webkit-transition: 0s; transition: 0s; -webkit-transform: translate3d(-900px, 0, 0);">
            <li class="clone" aria-hidden="true" style="width: 900px; float: left; display: block;">
                <a href="#" target="_blank"><img width="300" height="300" src="http://localhost/artech/wp-content/uploads/2013/10/radio-nippon-project.png" class="attachment-front-slider wp-post-image" alt="radio-nippon-project" draggable="false"></a>
                <div class="flex-caption"><h1>Radio Rippon</h1></div>
            </li>
                           /* More <li> with slides etc*/
        </ul>
    </div>
</div>

还有js代码

$('.flexslider').flexslider({
      animation: "slide",
      controlsContainer: ".front-page-slider",
      controlNav: false,
      slideshow: false
});

当我使用这个时

top: 25px;
bottom: 0;
left: 0;

仅在正确的方向上工作正常（当我按下下一个箭头时）

我也尝试了上、左、右、下的各种组合，但没有运气。

提前谢谢我的英语。

P.S : 我只使用 jquery.flexslider-min.js (Flexslider 2) 而不是提供的 css。

更新 1：我注意到这只发生在 chrome（最新版本）而不是 firefox（最新版本）上。甚至在 IE10 上也没有。

【问题讨论】：

标签： css flexslider

【解决方案1】：

我终于设法解决了。我必须输入：-webkit-backface-visibility: hidden; 才能让它工作。

受此答案启发：

Positioning issue in chrome with fixed positioned flexslider and sticky navigation

【讨论】：

【解决方案2】：

添加：

使用CSS：假，

滑块初始化为我解决了这个问题。

【讨论】：