AutoWidth setting in owl carousel 2 does not work on iphone - how to fix it?

Question

JavaScript

Hello!
There is an owl carousel 2 with these settings

$(document).ready(function () {
   $(".marathon").owlCarousel({
    margin:15,
    //autoWidth: true,
    lazyLoad:true,
    pagination: false,
    responsiveRefreshRate: 200,
    animateOut: "fadeOut",
    responsive:{
       0:{
           items:2,
           nav:false
         },
       541:{
           items:3,
           nav:true,
           autoWidth: true  
         }
    }
   });
});

On all devices with autoWidth: true , it works well, except for the iphone , where pictures do not have time to load so that the width works correctly and, as a result, at least the carousel works, but the fonts are huge. Therefore, I left autoWidth only for the desktop for now.

How can this be fixed so that it works everywhere?

Answer 1

In my case, setting styles worked

.owl-stage {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-box;
    display: box;
}

Answer 2

iphone, where pictures do not have time to load so that the width works correctly

Try loading pictures programmatically before starting the carousel. After processing the img.load event for all images, start the carousel. Maybe this will work