Owl Carousel 2 width issue on browser scrollbar

Question

I'm using Owl Carousel 2 with Bootstrap framework. There are 12 items that I have in the Carousel and I need to display three on the 1280-pixel wide resolution.

The owl-stage width is calculated as the total width of the Carousel (on desktop-1280px) which comes out to be as 3772px when there is no scroll bar on page.

Now if I open developer tools and then close it back again (i.e. bring a scroll bar onto the page and then remove) the width of class owl-stage becomes 3840px.

Due to this, on page load since the width is 3772 some content of the fourth slide is visible (probably just 5–6 pixels) but it disturbs the layout.

autoWidth:true is not applied.

$('.owl-carousel').owlCarousel({
    loop: true,
    margin: 0,
    nav: true,
    onInitialized: fixOwl,
    onRefreshed: fixOwl,
    navText: [
        "<span class='left-arrow-purple-bar'></span>",
        "<span class='right-arrow-purple-bar'></span>"
    ],
    responsiveClass: true,
    responsive: {
        320: {
            items: 1.2,
            nav: true
        },
        520: {
            items: 1.45,
            nav: true
        },
        720: {
            items: 2.4,
            nav: false
        },
        960: {
            items: 3,
            nav: true,
            loop: false,
            slideBy: 3,
            margin: 0
        }
    }
});