Issue with iframe resizing with Android mobile browsers

[DarrenFennell]

I have an iframe where the content can be variable and have used the iframeresizer script successfully to present this through desktop browsers (IE 11, Google 49 & Firefox 48 tested). The problem I am having is with mobile browsers. I'm currently testing the same content on an Android phone running version 6.0.1 of the OS, installed on this are the mobile versions of Chrome 52 and Firefox 48 downloaded from the standard Google Play store.

I have the content for iframeresizer set to have a minHeight of 300 but with both of these browsers this is all I am seeing, the content within the iframe is generating correctly but the iframe is not resizing.

I have built a test page using the same configuration which can be found here http://map.conwy.gov.uk/iframetest.htm. Is there any chance someone could have a look at this on an Android device and give me some advice on how best to config iframeresizer so that it functions with these browsers.

Update: I've just borrowed an iPad Mini (running iOS 9.3.4) from someone and everything seems ok in Safari so is this something Android specific?

Many thanks

[mertero]

Hello Darren,

I have the same issue - my resized-iframe works great in many browsers, but not on my mobile phone...

I'll be happy if someone can help here!

Ron

[erotte]

Same here.
Works great but fails in Android (4.2.2, 5.1.1, 6.0.1) + Chrome.

[DarrenFennell]

I've expanded testing to include Opera 19 and Dolphin 11.5 Android browsers, both exhibit the same anomaly even though JavaScript processing appears to be enabled in all browsers. Any assistance with this would be appreciated as the workaround would probably be to hard code a height into the iframe which isn't something I really want to have to do.

Many thanks

[mertero]

I found a workaround online. I added the following CSS to the iframe element:

#cwIframe { width: 1px; min-width: 100%;}

And this to have fixed my problem on Android and iOS...

[sharplogicians]

I was having a problem on mobile browsers (both android/iOS) that when the iframe loaded, the height kept on increasing and increasing and increasing. So When I used this, it resolved the issue.

iFrameResize({ log:true, 
  interval:1, 
  tolerance: 1, 
  resizeFrom : 'parent', 
  heightCalculationMethod: heightResizeMethod, 
  resizedCallback: function(messageData){
    iframeResizerLoaded = true; 
  }
});

[davidjbradshaw]

@sharplogicians I really don't recommend setting interval to one, that will create performance issues.

I also not sure why you need that flag, but use initCallback for that.

I expect the real issue can be found in your CSS.

[sharplogicians]

@davidjbradshaw Actually, you are right. My issue isn't resolved yet. And my issue isn't about CSS either. So my iframe resizing works perfectly on desktop computer. But on mobile, as the content loads slowly in the iframe, it keeps on increasing the height which si fine. But once all content is loaded, then shouldn't it stop further increase in height? It keeps on going and going and going. Doesn't stop expanding the height of the iframe.

[davidjbradshaw]

That problem is caused by a CSS element being set to always be below the bottom of the page, you can up the tolerance or fix your CSS to resolve this.

[sharplogicians]

Yeah thanks. I was actually able to fix it on all places using taggedElement heightcalculation. Thanks