After refreshing the page, the function calculates the height incorrectly?

Question

JavaScript

There is an owl carousel

$(document).ready(function() {
$('#carusel').owlCarousel({
<?php if ($autoplay_on) { ?>
autoplay:true,
autoplayTimeout:<?php echo $autoplay; ?>,
<?php if ($stophover) { ?>
autoplayHoverPause:true,
<?php } ?>
<?php } ?>
rewind:true,
<?php if ($navigation) { ?>
nav: true,
navText:  ['<i class="fa fa-chevron-left fa-5x"></i>', '<i class="fa fa-chevron-right fa-5x"></i>'],
<?php } ?>
autoplaySpeed: <?php echo $rew_speed; ?>,
onInitialized: OwlStageHeightSpecial,
onInitialize: OwlStageHeightSpecial,
 
onRefreshed : OwlStageHeightSpecial,

responsiveClass:true,
responsive:{
0:{
items:2,
},
768:{
items:3,
},
1024:{
items:4,
},
1200:{
items:<?php echo $items; ?>,
}
}
})

function OwlStageHeightSpecial(event) {
$('.carusel').css({'height': $('#carusel .owl-stage-outer').outerHeight() });
}

});

The problem is that after reloading the page, sometimes the OwlStageHeightSpecial function incorrectly calculates the height

Answer 1

Скорее всего это из-за transiton на margin и padding. Уберите transition этих свойств у контейнера, должно помочь