CODEWITHSUNDEEP
javascriptcsstwitter-bootstrapgoogle-chromecarousel
Sergej
Sergej

Reputation: 1092

Bootstrap Carousel is destroying CSS columns in Chrome

I have a Bootstrap Project which uses the TWBS Carousel and a 2-columned-list.

The Code is like: 

<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>

You can find the full code here: http://jsfiddle.net/61sxephp/

I tested it in Firefox and Chrome. Firefox is showing it as expected and Chrome shows the list in 2 column while the Carousel is sliding and else in 1 column.

I can't get why...

Is there a possibility to use these components together in Chrome?

Upvotes: 1

Views: 132

Answers (1)

m4n0
m4n0

Reputation: 32285

It seems to be a bug almost similar to this: CSS Column layout blinks on dissapear on hover with transform and transition.

The temporary solution in that thread is given as adding transform: translatez(0) to the child items.

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

Updated JSfiddle

Upvotes: 1

Related Questions