I decided to make a slider on Owl Carousel 2. Everything works fine, I like it, but I've noticed a bug. When I change the size of the browser window (only Chrome), the slider items are rearranged and there is a phantom item on back side.

HTML:

<div class="owl-carousel">
    <img src="">
    <img src="">
    <img src="">
    <img src="">
</div>

Script:

$(".owl-carousel").owlCarousel({
    loop: true,
    margin: 20,
    items: 3,
    nav: true,
});

Screenshot:

How can I fix it?

[Codepen]

I decided to make a slider on Owl Carousel 2. Everything works fine, I like it, but I've noticed a bug. When I change the size of the browser window (only Chrome), the slider items are rearranged and there is a phantom item on back side.

HTML:

<div class="owl-carousel">
    <img src="http://placehold.it/320x240?text=Slide%200">
    <img src="http://placehold.it/320x240?text=Slide%201">
    <img src="http://placehold.it/320x240?text=Slide%202">
    <img src="http://placehold.it/320x240?text=Slide%203">
</div>

Script:

$(".owl-carousel").owlCarousel({
    loop: true,
    margin: 20,
    items: 3,
    nav: true,
});

Screenshot:

How can I fix it?

[Codepen]

• javascript
• jquery
• html
• css

• 1 seems like a rendering bug, i don't have this bug (tried FF / Chrome / IE11 / Edge 12) – dstN Commented Nov 3, 2015 at 9:10
• @Dustin, Probably yes, I see it only in Chrome and when I reload the page it disappears. – Ihor Tkachuk Commented Nov 3, 2015 at 9:19

1 Answer 1

Try this

.owl-carousel .owl-item img {
  -webkit-backface-visibility: hidden;
}