Doesn't work on mobile browsers
indigator opened this issue · comments
I tried on iPhone 4, iPhone 5 [iOS > 7]. Is there a fix for mobile browsers?
Can you please provide more details and a test-case? What doesn't work?
iFrame responsiveness did not not work when I tested on mobile browsers. For mobile browsers height of iFrame remained 0px. So the content of iframe is hidden on mobile browsers.
Following is the CSS style of iframe
element.style {
width: 100%;
padding: 0px;
margin: 0;
border: none;
display: block;
height: 0px;
overflow: hidden;
}
I am having the same issues in both mobile safari and chrome. The issue is that the application is a full page app, when pulling in the app into an iframe and using the library it does not respond. I did not have the issue of 0px height but the content within the frame was trying to scale proportionately with the width of the header element. Note this is a rails app using leaflet.js, angular.js and some other JS libraries. I am not sure if that has a bearing.
Using current versions of chrome I've found that even with a desktop browser, height:0px; results in an invisible iframe. The demo still works fine, but trying to iframe either Moodle or WordPress (with responsiveiframe.js first in the header and then the footer) does not display anything. If I set the height to any value it becomes stuck there. Both Moodle and WordPress are php based, but are set to load jquery etc.
Unfortunately, it's impossible to guess what may be the cause in a large system such as Moodle or WordPress: there could be N number of things, including some conflicts.
If you can please create a jsfiddle or jsbin or some other test-case where the problem can be seen and debugged, that would be very helpful.
Thanks
Thanks - I've sent you a tweet so I can DM you the fiddle (sorry, the content doesn't belong to me so I can't share it in public). It may be a problem with jquery in no.confict mode
Just set height into something px and your iframe will be visible on mobile web