Owlcarousel2: Initial and Resized width calculations are different.

[ghost]

I made a codepen demo.
https://codepen.io/atilkan/pen/GmLOXW

I suspect the resized value and the initial value of stage width calculated differently. Because after resizing the window back and forth it works as expected.
Also there are similar issue reports.

This is the value after resizing the window a bit. (this is what i expect, close at least)
Current container width: 1280px
style="transform: translate3d(0px, 0px, 0px); transition: 0s; width: 1300px;"

From here: I just click refresh and the value here:
Current container width: 1280px (same)
style="transform: translate3d(0px, 0px, 0px); transition: 0s; width: 1220px;"

When i resize window for smaller screen, This is the style.
Current container width: 640px
style="transform: translate3d(0px, 0px, 0px); transition: 0s; width: 1950px;"

[Bob-Kink]

I have a similar issue: https://github.com/OwlCarousel2/OwlCarousel2/issues/1867

Really hoping this bug gets fixed. For now I'm sticking with v2.0 because the issue is not present there.

[ghost]

I am using this for some projects and always has problems. I will drop this now. 500+ issue not answered, that means don't use it.

Solution to this: Don't use flex container.

[m1xal10s]

Hi, I had the same issue (also mentioned in #1867 and #1697 ) and I managed to fix it by using a small hack. I trigger a manual refresh on the problematic carousel right after it's initialized to recalculate and get the correct width values.

var owl = $('.owl-carousel');
owl.owlCarousel({
    ...
    //carousel options
    ...
    onInitialized: function() {
        setTimeout(function() {
            owl.trigger('refresh.owl.carousel');
        }, 1);
    }
});

Hope this helps until the underlying problem gets resolved.
Maybe I'll give it a try if I find the time. :)