Bootstrap Карусель уничтожает столбцы CSS в Chrome

Question

У меня есть проект Bootstrap, который использует карусель TWBS и 2-столбчатый список.

Кодекс, как:

<div id="header-carousel" class="carousel slide" data-ride="carousel" data-interval="1200"> 
    [Carousel stuff here ...] 
</div> 
<section> 
    <div class="container"> 
     <div class="row"> 
      <div class="col-sm-6 col-lg-3"> 
       <h3>Cities in Germany</h3> 
       <hr /> 
       <div class="multiCol"> 
        <ul class="list-styled"> 
         <li><a href="#">Berlin</a></li> 
         <li><a href="#">Hamburg</a></li> 
         <li><a href="#">Munich</a></li> 
         <li><a href="#">Cologne</a></li> 
         <li><a href="#">Kempten</a></li> 
        </ul> 
       </div> 
      </div> 
     </div> 
    </div> 
</section> 

Вы можете найти полный код здесь: http://jsfiddle.net/61sxephp/

я тестировал его в Firefox и Chrome. Firefox показывает это как ожидалось, и Chrome показывает список в 2 столбцах, пока карусель сдвигается, а еще в 1 колонке.

я не могу получить, почему ...

Есть ли возможность использовать эти компоненты вместе в Chrome?

Answer 1

Это, кажется, ошибка почти похожее на это: CSS Column layout blinks on dissapear on hover with transform and transition.

временного решения в этом потоке даются как добавление transform: translatez(0) к дочерним элементам.

.list-styled > li { 
    position: relative; 
    transform: translateZ(0); 
} 

Updated JSfiddle