Owl Carousel 2 resizes window

Question

I decided to make a slider on Owl Carousel 2. Everything works fine, I like it, but I noticed an error. When I resize the browser window (Chrome only), the slider elements are reordered and there is a phantom element on the 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 this?

[ Codepen ]

Answer 1

try it

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