Flexslider height's equal the tallest on a mobile browser

Question

I am trying to figure out an issue with Flexslider that only appears when I test it on an mobile browser such as Safari Mobile.

All of the

containers are the

Answer 1

For anyone still has this issue in 2019/2020, please have a look at the new property called "smoothHeight" at the Flexslider docs

I fixed my issue by setting "smoothHeight" to true.

$('.sliders').flexslider({
    animation: 'slide',
    smoothHeight: true,
    controlNav: false,
    customDirectionNav: $('.js-slider-control button'),
});