Sliders (Owl Carousel, slick, etc.) can't set proper width on iOS

[elfacht]

Just an iOS issue so far:

Calling a carousel/slider like Owl Carousel or slick slider inside the iframe will break the width and will cause and horizontal scrollbar width a with around 1000+ px on the iPhone. Works fine with Android, though.

This might be a mobile Safari issue, but is there any way to re-init the iframe width or something?

[davidjbradshaw]

Can you post a simple test case I can look at. What height calculation method are you using?

[davidjbradshaw]

Closed due to non-response. Will reopen if I get more details.

[codelero]

Hi David, I think my team have stumbled on this same issue. We're running the latest version (v3.5.0). Once a carousel has been initialised the iframe reports an creased width and seems to continuously expand. It only happens on iOS - versions 7, 8 & 9 tested.

I've recreated a simplified version here using Slick Carousel (we found the same problem with Owl Carousel).

I've tried autoResize, maxWidth, heightCalculationMethod (all), widthCalculationMethod (all) with no success.

The only slider we've found that work's is Flickity (I believe it's because it doesn't create an element with the width of the slides stacked i.e. one huge element, but instead uses absolute positioning).

I've included a link to a copy of the demo files on the page if it helps.

Any help will be greatly appreciated .

[davidjbradshaw]

Thanks for the example, will take a look when I have a spare moment. If you find the solution I'd welcome a PR.

[markvantilburg]

owl carousel

Webpage: http://owlgraphic.com/owlcarousel/

Creates a div like this:

<div class="owl-wrapper" style="width: 4560px; left: 0px; display: block; transition: all 800ms ease 0s; transform: translate3d(-1140px, 0px, 0px);">
<div class="owl-item" style="width: 285px;">Slide 1</div>
<div class="owl-item" style="width: 285px;">Slide 2</div>
<div class="owl-item" style="width: 285px;">Slide 3</div>
<div class="owl-item" style="width: 285px;">Slide 4</div>
</div>

[stojsins]

Hello.

I have the same issue: OWL carousel in iFrame doesn't work. It takes the whole carousel width - it doesn't resize it on iOS (iPhone and iPad). You can check if you open live website http://goo.gl/6JKwtM, part Live scores on iPhone and iPad.

Best, stojsins

[davidjbradshaw]

Have you tried using the tagged element size calculation method and tagging the slider container?

[stojsins]

Hello David. Could you provide me more details, please?

[davidjbradshaw]

https://github.com/davidjbradshaw/iframe-resizer#heightcalculationmethod

[zitrusblau]

same behaviour it seems with bxslider: https://github.com/stevenwanderski/bxslider-4 inside an iframe. we tried to use the tagged element size calculation method both on the slider container and on an outer container in the DOM (we dynamically add more content outside the slider on slide change events), but no luck.

so anyone has a solution to this problem so far?

[zitrusblau]

used another slider mode 'fade' for the bxslider and this seemed to resolve the issue (tested on mobile safari 9.1 / iphone 6):

http://bxslider.com/options

[shaselboeck]

Same behaviour - no solution? I am using OwlCarousel v1.3.3: https://github.com/OwlFonk/OwlCarousel

The error occurs only under iOS. On desktop computer or Android devices I got no error.

[markvantilburg]

Depends on the slider, if it creates very wide div's that code should be changed.

[shaselboeck]

First item is about 1120px: <div style="width: 1120px;" class="owl-item active">

Do you have a solution for the bug?

[tylerbrostrom]

I can confirm that using Slick in conjunction with iFrame Resizer leads to the width of the iframe extending past the viewport width on iOS.

There's good news though, adding width: 1px; min-width: 100% to the body tag inside the frame fixes it.

Here's a reference to a similar iOS iframe issue: http://stackoverflow.com/questions/23083462/how-to-get-an-iframe-to-be-responsive-in-ios-safari

[herrkessler]

@bro-strummer You just saved my friday night, thanks!!

[markjamesmcfadyen]

@bro-strummer Thank you so much!

[nurulakbar]

@bro-strummer my hero!

[lmcorso]

@bro-strummer I've just read your comment and I have to thank you man! you saved my day!

[rajaneeshgit]

@zitrusblau Thanks, it's working for bxSlider using mode: "fade" on ios. I checked on iphone 6 and 5s.

[jfknoack]

yaaaay solves the problem. Thanks!!!

[gokhancvs]

@bro-strummer's solution works! Thank you so much!

[davidjbradshaw]

Closed @bro-strummer css fix is now in the docs