Owlcarousel2: Chrome 45 and responsive images break?

[ThisIsDallas]

This is specific to Chrome (45.0.2454.101). Actually, I haven't check on Firefox or IE but everything works on Safari.

When using Owl Carousel 2, there is a bug where it looks like the images will duplicate themselves and appear behind the actual normal images when the browser is resized.

To see what I am talking about, here is a jsfiddle http://jsfiddle.net/qx90s8cs/9/

The slider is a very basic implementation as well:

jQuery(document).ready(function($){
    $('.main-featured-posts').owlCarousel({
        loop:true,
        margin:10,
        nav:false,
        dots:false,
        responsive:{
            0:{
                items:1
            },
            800:{
                items:2
            },
            1000:{
                items:3
            }
        }
    });

});

All you need to do is use Chrome resize the browser and then scroll through the images.

Is there a fix for this issue?

[talalus]

+1

[raknjak]

This issue has been existing for a while, you can destroy and reinit the carousel on window resize as a temporary workaround.

if ($('.owl-carousel-top').length > 0) {

        mainOwlCarousel(); // does the carousel loading

        $(window).resize(function() {
            $('.owl-carousel-top').trigger('destroy.owl.carousel').removeClass('owl-carousel owl-loaded');
            $('.owl-carousel-top').find('.owl-stage-outer').children().unwrap();

            mainOwlCarousel();
        });
    }

[x1code]

The same is and with landscape and portrait on mobile phone.

[x1code]

I used owl.carousel.css from OwlCarousel and this fixed bug. I didn't check which part of css from old carousel need to be implemented in v2 to fix this issue.

[Madison80]

Hi there,
I had the same issue and with this css snippet it works fine for me:

/* fix */
.owl-carousel  .owl-wrapper,
.owl-carousel  .owl-item{
-webkit-backface-visibility: hidden;
-moz-backface-visibility:    hidden;
-ms-backface-visibility:     hidden;
-webkit-transform: translate3d(0,0,0);
-moz-transform: translate3d(0,0,0);
-ms-transform: translate3d(0,0,0);
}

[x1code]

Yup. This is the fix.

[pedrobuelna]

Fix it Thanks!!

[SmashBrando]

This really needs to be implemented into the core CSS. I spent about an hour trying the right combo of search terms and fond a similar answer on another blog. Im my case I had several elements, not just images duplicating. I set mine to use a wild card and target any element within the owl-item.

[jrandyanderson]

I have spent a few weeks on and off trying to get this bug fixed on a client's site. The above CSS from Madison80 fixed it perfectly. I highly suggest implementing this into the main code.

[Jahangiruzzal]

Fix it Thanks!!

[eccentricpixel]

Yup, this fixes it. +1

[daviddeutsch]

@Madison80 Sweet fix! Would you like to contribute this as a Pull Request (that I would be happy to accept, of course)?

[TheFrost]

yeah! @Madison80 Fix it Thanks!!

[zzseba78]

@Madison80 Fix it !! I would be nice to have this fix in next version

[EroTiXx]

@Madison80 Thanks, it's work

[dijkermans]

This issue still exists. Yes, the CSS is updated but the carousel still needs to be reloaded in order to prevent overlapping when you resize the window.

I use this but that's not ideal either:

`if ($('.owl-carousel').length > 0) {

    mainOwlCarousel();

    $(window).on('resize',function() {

    $('.owl-carousel').owlCarousel('destroy'); 

        mainOwlCarousel();
    });

}`