Как исправить мигание контента в слайдере?

Question

[Даниил Постнов]

В движении некоторые элементы слайда не видны, как только анимация заканчивается, они появляются. Выглядит не очень. Нужно чтобы они были даже во время анимации

recordit.co/EfSRF9a4jC

Элемента слайдера (flexslider)

<li class="secondary-slider__item clone" aria-hidden="true" style="width: 245px; margin-right: 0px; float: left; display: block;">
<div class="head-block">ТОП 100</div>


   <a href="#">
     <div class="medal2__medal medal2__medal--gold"><span class="medal2__medal-text">2</span></div>
     <img class="slider-img" src="/upload/resize_cache/main/fef/245_265_2/fef88e5309101e12cc19f2f141e6397b.jpg" draggable="false">
     <div class="personal-information">
       <span class="personal-information__item">Ирина, 26 лет</span>
       <span class="personal-information__item">Севастополь</span>
     </div> 
   </a>

    <div class="options">
        <a href="" data-toggle="tooltip" data-placement="bottom" title="" class="white-tooltip white-tooltip__message" data-original-title="Сообщения"><i class="fa fa-envelope" aria-hidden="true"></i></a>
        <a href="" data-toggle="tooltip" data-placement="bottom" title="" class="white-tooltip" data-original-title="Фотографии"><i class="fa fa-camera" aria-hidden="true"></i></a>
        <a href="#ModalGifts" data-toggle="tooltip" data-placement="bottom" title="" class="white-tooltip js-show-modal" data-original-title="Подарить подарок"><i class="fa fa-gift" aria-hidden="true"></i></a>
        <a href="" data-toggle="tooltip" data-placement="bottom" title="" class="white-tooltip" data-original-title="Цель регистрации: Отношения"><i class="fa fa-bullseye" aria-hidden="true"></i></a>

<a id="favtop100_29_clone" data-toggle="tooltip" data-placement="bottom" title="" class="white-tooltip" data-original-title="Добавить в избранное">
<i class="fa fa-star" aria-hidden="true" style="cursor:pointer;"></i></a>

        <a href="" data-toggle="tooltip" data-placement="bottom" title="" class="white-tooltip" data-original-title="Увеличить фотографию"><i class="fa fa-search-plus" aria-hidden="true"></i></a>
        <span class="add-user">
        <a href="" data-toggle="tooltip" data-placement="bottom" title="" class="white-tooltip white-tooltip__friend" data-original-title="Добавить в друзья"><i class="fa fa-user-plus" aria-hidden="true"></i></a></span>
    </div>
</li>

Comments

[Даниил Постнов]

Так происходит скорее всего из-за того что браузеру приходится прорисовывать много элементов, я пошел другим путем и изменил тип анимации с "slide" на "fade", при таком типе анимации проблема пропадает

[Даниил Постнов]

Denis Bednov,

opacity: 0;
position: absolute;
bottom: 36px;
width: 100%;
text-align: center;
color: #fff;
font-weight: bold;
height: 55px;
background-image: linear-gradient(to top,rgba(0,0,0,0.8),rgba(0,0,0,0.0));
transition: .5s opacity;