I tested my website application on both my iOS devices and my Windows PC, along with the Google Chrome device toolbar. Any fixed elements inside the iFrame are fixed when using the website application on my Windows PC and Google Chrome device toolbar. However, any fixed elements inside the iFrame are not fixed on iOS devices. Apparently this could be a bug that iOS devices have and was wondering if there is a solution so that elements that are suppose to be in a fixed position are actually fixed on iOS devices. Here is the CSS code I have:
/* Div that contains the iFrame */
#interactWithNav {
position: absolute;
top: 0;
left: 0;
z-index: -1;
width: 100%;
height: 100%;
-webkit-filter: blur(5px);
filter: blur(5px);
display: table;
text-align: center;
}
/* iFrame that loads the page with the fixed elements */
#interactWithNavFrame {
border: 0;
width: 100%;
height: 100%;
}
If it were me, I would create a targeted test to prove these theories and show them.
I'd make a mini website with a fixed position element, and an absolute element (for good measure)
http://codepen.io/sheriffderek/pen/xqaYqM
Then I would make another mini website with an iframe of the source of that previous website example(in this case the debug CodePen version) http://s.codepen.io/sheriffderek/debug/xqaYqM
http://codepen.io/sheriffderek/pen/GWXQBN
Send this link to your phone:
http://s.codepen.io/sheriffderek/debug/GWXQBN
Then I'd use the debug version of that to test on the iPhone or whatever.
<header>
<h1>iFrame example with fixed position and absolute position to check on iOS and other devices</h1>
header....
<div class='fixed-thing'>fixed-thing</div>
</header>
<main>
main
<div class='absolute-thing'>absolute-thing</div>
</main>
and then...
<main>
<iframe src='http://s.codepen.io/sheriffderek/debug/xqaYqM' frameborder='0'></iframe>
</main>
Everything seems normal to me.
Can this help you explain the issue a bit more? Are you using any transform: translate in your code? Why are you positioning the iframe in an absolute container?
It appears that the iFrame is automatically full height on iOS no matter what you set it to, so no scrolling, which means fixed wouldn't even be detectable... See this thread: How to get an IFrame to be responsive in iOS Safari?
Related
I found a number of issues with the POSITION:FIXED property on iOS Mobile. But it didnt resolved my issue. In desktops and in Android devices, works perfectly. Even in MacBook Air also.
ISSUE:
I have a position:fixed header, and a position:relative content (using padding-top:height-of-header for alignment). When i scroll fast, it starts scroll and then suddenly, it jumps back to the top of the page. But this issue is not showing when we scroll slowly.
This is the code for header
.site-header {
position: fixed;
width: 100%;
top: 0;
z-index: 9999;
}
this is the code for main-content
.main-content {
padding-top: 80px;
position:relative;
}
Tried with -webkit-overflow-scrolling: touch; , transform: translate3d(0,0,0);.
Its an e-commerce website, developed in SHOPIFY.
the issue was, in shopify, there were some third party applications (that's how they used to call plugins) are used. so, somehow jQuery plugins got conflicts and once i remove the plugin, issue got resolved. i don't know how jQuery effects my css code. but it got resolved when i remove/update the library.
I'm creating a site using Angular 2, I successfully included a Google Form inside using an iFrame. It's working perfectly on every browser I tested (Firefox, Opera, Chrome) on my laptop (linux) and on my phone (android).
However, it's not working on iOS. The iframe is diplayed and can be scrolled (screenshot) but it's too large for the screen, it's not responsive at all. Here is what it looks like on my tablet (android).
I tried fixing it by looking at a dozen stackoverflow answers, but so far I've only managed to make the iframe scrollable by adding the last line of CSS. It's been a month now that I'm stuck with the iframe like this and I'm becoming a bit desperate!
Setting the width of the iframe manually to an absolute value has no effect on iOS (but it does have one on my phone).
This is the CSS of the div that contains the iframe:
display: -webkit-box;
display: -ms-flexbox;
display: flex;
height: 100%;
width: 100%;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
and this is the CSS of the iframe itself:
max-width: 100%;
min-width: 100%;
height: 100%;
Here is the HTML part containing the iframe:
<div class="frame-flex">
<iframe src="https://docs.google.com/forms/whatever/viewform?embedded=true" frameborder="0" marginheight="0" marginwidth="0">Loading...</iframe>
</div>
I must add that I'm a beginner in HTML/CSS (in case you're wondering why the CSS is ugly). Thanks for your time anyway!
PROBLEM:
Google is aware of google forms not being responsive on IOS: https://productforums.google.com/forum/#!topic/docs/8UG9CQmgzY0
Essentially, the embedded google form works fine on desktop but has no scrolling options on mobile. On my IOS 9 tests on ipad, Safari would also crash. Bootstrap4 and Angular tests I conducted found that embedded iframe google forms were also non responsive and no scroll bar.
WORKAROUND:
You can still use the following on IOS if your web page does not use ONE OF THE FRAMEWORKS ABOVE (this also allows for a top navigation bar):
<style>
#all{
width:100%;
height: 100%;
float:none;
text-align:center;
}
</style>
<div id="all">
<iframe src="https://docs.google.com/forms/d/e/1FAIpQLSf-TDDGGzhgIpQLSfwA7QGFQLSf9IpQLSf/viewform" frameborder="0" marginheight="0" marginwidth="0" ></iframe>
</div>
FINALLY (though not directly related to google forms): Check these stackoverflow links:
how to properly display an iFrame in mobile safari
How to get an IFrame to be responsive in iOS Safari?
I have an xcode project with html files. I am embedding a google doc using an iframe, but when I run the simulator, the width overflows on the right for iphone 6 and larger. It looks fine on iphone 5.
I've tried to change the margins in google docs and attempted some styling of the iframe.
iframe {
width: 100%;
display: block;
}
<iframe src="thesrc"></iframe>
I have also tried to embed it a container, but that didn't work either. I'm not sure if it's a css issue or I can't get a responsive iframe within xcode. Again, seems to be working fine on iphone 5.
If I understood your question correctly, I think you need to provide the correct media CSS rules. I don't know though if you can this in the external html of an iframe.
to perform media queries, you can do something like
#media screen and (min-width:500px) {
body {
margin: 0 auto;
width: 768px;
}
}
My site is www.familyhistoryconferencenwa.org
I have a MacBook Air, an iPhone 5 and an iPad Air so I phrase this for iOS 8.1.1 but obviously I want the solution to work for all tablets and smart phones across all platforms.
On the "Class Schedule" page of the site I have an iframe that works correctly on my MacBookAir running OS X Yosemite (10.1.1) but on my iPad Air and iPhone 5 running iOS 8.1.1 the frame width displays improperly. It extends to the right beyond the right edge of the page. If you visit the site on a a desktop or laptop then on a mobile device you should see what I mean.
My question is: what code do I use to get the iframe to display properly on mobile devices?
The relevant code is:
<div style="text-align: center">
<iframe src="url"; frame-border="1"; height="600px"; width="100%">
</iframe>
</div>
As I said, this code works correctly on the MacBook Air. The iframe occupies the width of the page. But on the iPhone and iPad the frame extends beyond the right border of the page. What am I doing wrong? (By the way, if I set the height to 100% I inexplicably get a frame about 200 px high although the source document takes 600px to view all of it.)
I've consulted two texts on HTML coding, searched other forum sites on the web and searched this site for the answer to similar questions but have had no luck. I've seen the item "Iframe on mobile devices problematic" on this site but I'm really hoping that I'm not stuck with that for an answer.
Any help will be greatly appreciated.
Thanks
Steve
The best responsive iframe code I've come up with thus far is:
// HTML:
<div class="iframe-container iframe-container-for-wxh-500x350"
style="-webkit-overflow-scrolling: touch; overflow: auto;">
<iframe src="http://urlToTargetSite.com">
<p style="font-size: 110%;"><em><strong>IFRAME:</strong> There is
iframe content here but your browser version does not support
iframes.</em> Please update your browser to its current version
and try again.</p>
</iframe>
</div>
// CSS:
.iframe-container {
position: relative;
margin: 5px;
height: 0;
overflow: hidden;
}
.iframe-container iframe {
position: absolute;
top: 0;
left: 0;
margin: 0;
padding: 0;
width: 100%;
height: 100%;
border: 1px solid #7a8b8b;
/* put following styles (necessary for overflow and
scrolling handling) in div container around iframe
because not stable in CSS
-webkit-overflow-scrolling: touch;
overflow: auto; */
}
.iframe-container-for-wxh-500x350 {
padding: 10px 10px 70% 10px; /* padding-bottom = h/w as a % */
}
The rationale behind the code can be seen at How To Make Responsive Iframes -- It's Easy!
There are three salient points:
Set no attributes in the iframe opening tag, specifically not width and height.
Put a div container around the iframe, and use CSS height: 0; and then padding-bottom: nn%; to give the container a height equal to the height:width ratio expressed as a percentage.
Style the div inline with -webkit-overflow-scrolling: touch; and overflow: auto; which are necessary to handle scrolling and overflow on mobile devices and are unstable in CSS.
There's an iframe, which basically has more content than fits into the frame. The sizing of the frame is based on the browser screen size and lets the overflow scroll, which works perfectly on all browsers, except for iOS. On iOS, safari decides to resize the frame to fit the content. Not what you'd expect.
Example code on jsFiddle:
http://jsfiddle.net/R3PKB/2/
Try it out on your iOS devices:
http://jsfiddle.net/R3PKB/2/embedded/result
The HTML:
<div class="frame_holder">
<iframe class="my_frame">
// The content
</iframe>
</div>
The CSS:
body {
position: relative;
background: #f0f0f0;
}
.frame_holder {
position: absolute;
top: 50px;
bottom: 50px;
left: 50px;
right: 50px;
background: #ffffff;
}
.my_frame {
width: 100%;
height: 100%;
border: 1px solid #e0e0e0;
}
You can make it work by adding a wrapping div with overflow: auto; and -webkit-overflow-scrolling:touch;.
Here's your example with it: http://jsfiddle.net/R3PKB/7/
According to previous questions on SO it's a bug since iOS 4. I found more info here:
https://stackoverflow.com/a/6721310/1047398
iframe on iOS (iPad) content cropping issue
This is an old question, but since it comes first on google and the issue exists on nowadays ios devices, I repost a better fix that I found on this page:
How to get an IFrame to be responsive in iOS Safari?
Basically, if you have an iframe with scroll (let's say a twitter widget), the solution above won't work very well because it makes the parent scrollable. The fix that worked for me is replacing height: 100% with height: 1px; min-height: 100%;.
If iOS Safari is displaying your iframe content from a different origin than expected (i.e. it is shifted over by some pixels), try adding scrolling="no" as an attribute to the iframe. This should prevent it from automatically fitting its content.
More here.
using height: 1px; min-height: 100%; did not work for me, though I did not need a scrolling element. I had to use the overflow:auto; on a surrounding div instead. Note that this method is discouraged as it may have unintended consequences, but I tested on Android/iOS and desktop browsers and could not find any issues yet. fingers crossed.
This is a nice post from Andy Shora on some iOS iframe nuances: http://andyshora.com/iframes-responsive-web-apps-tips.html