Owlcarousel2: Uncaught Can not detect viewport width.

[sadikyalcin]

Getting this error on iOS and Android while trying to use owl carousel in an iframe. How can I possibly fix this?

Using latest version of owl carousel
Framework: cordova
iOS: 10.3 and Android 7 + 8

[wladimiravila]

hellos @sadikyalcin any solution, I have the same problem

[sadikyalcin]

@wladimiravila no not yet mate. Currently working on something else. Will get back to it later at some point.

[wladimiravila]

we are trying change this carousel to another one

[pascalporedda]

Hey @sadikyalcin,

You have not added a link to a working live example. See CONTRIBUTING.md.

Please add a link to a page where I can verify this error. You can use a service like jsfiddle, plnkr, jsbin or codepen. I don't think that it is releated to the webview wrapper by cordova so we might see this through an emulator on a normal website as well.

And make sure you're using the latest Owl Version! Because I remember that this was an issue a while ago and we fixed it.

[sadikyalcin]

@pascalporedda Hi,

Sorry, don't have time with this at the moment as I'm working on a different project. I don't think it's Webview or Cordova related either. Most likely it's the iframe causing an issue. I will create a demo and provide a link when I get back on this.

[felixabele]

Hi @pascalporedda,

I think we have a related issue, when the carousel is embedded in an iframe the content is not scaled correctly on mobile devices (ios 11.2, Chrome, Safari). Looks like the viewport is not detected correctly.
Here is a code sample: https://jsfiddle.net/1js5teaL/6/
If you want to check on mobile: http://felix-abele.de/owl-iframe.html

You will see the navigation outside the iframe correctly adapts to the viewport but your website, which is embedded, doesn't.

Thanks for looking into it.

[pascalporedda]

Hi felix,

i've had a look on this via browserstack, is this really a problem related to the owl carousel or to iframes in mobile safari? I'am not sure but have seen this in other cases as well.

[sadikyalcin]

@pascalporedda I get the error on Android as well as stated initially.

[felixabele]

@pascalporedda I am also no longer sure this is related to Owl Carousel. But I have found a way how to fix it. I also updated the sample: http://felix-abele.de/owl-iframe.html
On mobile you will see that the first iframe does not behave as expected but the second does.
The difference is that on the top the slider is embedded within an element with width: 100%, the one on the bottom has width: 100vw, which works.

I am also not sure if this is related to the initially stated error message, but maybe it helps.

[sadikyalcin]

I know the cause of this issue. If the width / height of the iframe is not set, owl will throw that error. I don't know how it's trying to detect the viewport but that is the scenario I've come across. Sadly, it's random. Sometimes it throws the error, sometimes it doesn't.