I have ran into an iOS ONLY specific bug which i cannot seem to wrap my head around. I am currently rendering an iframe on a website which is fetching content from another one of my websites. The content in the iframe is displayed within a responsive slider. The slider works by getting the full width of the window and times that by how many slides there is.
To make it responsive it will recalculate the widths on jQuery(window).resize. At this point i would like to add that i have tested this on all browsers on pc and its fine, ive tried it on all android browsers and guess what, they all work fine. As soon as i take it to IOS for testing is where the problem begins.
It works fine if you visit the dedicated website. However, When you view the content through the iframe, the javascript code thinks that the window is being resized which means its constantly resizing (getting bigger and bigger) making it dissapear of the screen making the window continually wider everytime.
HTML
<div class="iframe-container">
<iframe scrolling="no" src="*url removed*"></iframe>
</div>
CSS
.iframe-container iframe{width: 100%; min-height: 560px; border: none;}
Im thinking that its possible related to the content within the iframe ignoring the meta viewport tag or something?
Im unable to post a link to the issue due to client privacy reasons.
If anyone could shed some light on this, it would be much appreciated.
Thanks,
Lewis
In case it's still relevant or for anyone brought here by search:
Find the element inside the iframe which makes the window get bigger and bigger. Add max-width: 100vw; to its styles.
This helped me to fix a similar issue which also occurred only on ios and only when the page was loaded in an iframe.
Related
I noticed recently that every webpage I visit on iOS Chrome has an enormous blank space at the bottom of the page. The space is roughly equal to a full screen height (i.e. 100vh) and is located below all visible elements on the page. Basically I can keep scrolling the page until it's completely blank. The scrollbar also shows that the pages are much longer than their content would require.
All the pages I looked at behave fine on Android, on OSX, and even on iOS when I use Firefox or Safari. The issue seems specific to iOS Chrome. I'm not sure when this issue started but I've updated Chrome and it persists.
Is anyone else experiencing this iOS Chrome bug? I haven't found any info about it.
I created a dummy test webpage and just kept stripping it down to see what was causing the issue. Eventually I was left with a page containing only <p> tags and very minimal CSS (no positioning properties) but the extra space at page bottom still showed up. By adding a background-color to the <body> I could see that this extra space was within the <body> but there wasn't any element forcing the body to extend.
After much trial and error I discovered that if I disable Chrome's Smooth Scrolling this issue is resolved and all pages behave normally.
Solution: Load chrome://flags and set Smooth Scrolling to disable.
Seems odd that this would be necessary. Anyone know what's going on?
This is likely a Chrome bug (iPad). I also spent a lot of time debugging all the css and my components. End up event google.com it self has that mysterious white space (which is about the height of the content itself.).
6 hours gone, but it's a relieve to know it's nothing got to do with my codes.
iPhone with chrome is fine on my end
To stop the page from scrolling, in both x, and y axis, we use the overflow: hidden; attribute in css.
So if we apply this to the body,
body {
overflow: hidden !important;
}
this should work in your scenario!
Please make sure you have added this meta tag and the same attributes
<meta name="viewport" content="width=device-width,initial-scale=1.0">
And check your body tag CSS, there should not be height: 100vh and check your pages again by clearing browser cache or in the private mode.
My Google Street View iFrame loads fine but when I touch inside the image of the Street View map the page jumps to the bottom. This only happens on my Iphone 5s as well as my IPAD.
If I click on one of the controls it does not jump - but as soon as I touch the screen as if I want to drag the view to look around the page jumps to the bottom.
This happens on two of my websites where I have embedded the Street View Iframe so it cannot be specific to the website.
Can anyone advise how to prevent this annoying jump?
My website is http://www.360tours.co.za
I have the same problem. It seems to be related to iOS 10. Testing on the ipad3 with iOS 9.3.5 it works fine. Embedding it in a simple html page with only the iframe it seems to work fine. Looks like a combination of certain things.
I was able to solve this using this trick:
body, html {
height:100%;
overflow:auto;
-webkit-overflow-scrolling: touch;
}
Something to note - if you have absolutely positioned elements which are direct children of body (e.g. header), this will cause other issues on iOS - so you would need to wrap the site in a relatively positioned container.
adding this code
`body, html {
height:100%;
overflow:auto;
-webkit-overflow-scrolling: touch;
} `
caused dissapearing CSS animation in IOS on my site. May be due to "if you have absolutely positioned elements which are direct children of body"
didnt catch how to solve this issue so i just removed overflow and everything works fine now
nevertheless Thanks
So I have an iFrame displaying a Facebook page and I am trying to enable the native 'bounce' type scrolling however can't get anything to work.
I have tried this:
iframe {
overflow-y: scroll !important;
-webkit-overflow-scrolling: touch !important;
}
But have had no luck so far - tested on both simulator and real iOS device.
Any ideas?
I faced the same problem when our team built epub3 reader app on iOS.
Followed EpubJS v0.3 example, we could handle the problem.
Here is an example:
<div style="width:320px;height:570px;-webkit-overflow-scrolling:touch;overflow-y:scroll;">
<iframe scrolling="no" src="..." style="width:320px;height:8071px;"></iframe>
</div>
Note: you have to calculate iFrame height and set the CSS style (ex: 8071px). Using javascript, you can use
iframe.contentDocument.body.scrollHeight
You may ask me why we have to set height style. Followed some suggestions does not help us to handle handle dynamic content problem (you can see the problem here). By setting height, we can dynamically add or remove highlight texts of users.
Hope that helps,
This would be my approach...
Step 1. Increasing the size of the iframe until the scrollbars dissappear, like this: http://davidjbradshaw.github.io/iframe-resizer/
Step 2. Use David Walsh his trick with a parent div that scrolls the iframe: https://davidwalsh.name/scroll-iframes-ios
But I think it will fail, because of the lack of authentication for cross domain iFrames.
UPDATE: What if you would enlarge the iframe based on the scroll position of the parent div? So parent div scrolls 100px and you make the iframe 100px larger... (given the fact that the iframe has infinite height and assuming its scrollbar is hidden)
I have a strange problem. The website is using a template and on IPhone it is showing a strange black vertical bar on the right side.
I installed safari and activated the user agent. When I set the agent to the ipad, I am seeing the problem, but client told me its on his IPhone.
Strangely when I look with dev tools, it seems to be outside the html. What could be causing this? I have already tried to set html and body to 100% width and overflow-x to hidden, but it did not help.
I have included a screenshot:
I have never seen anything like this before. What could it be? thanks verymuch!
ADDITION:
Here a live example:
example offline, sry
Somewhere, at some point, you have an element with some extra padding, border or margin that is blowing things out. I couldn't track it down, but an easy way to kill it off these days is with this in your style sheet (which is commonly used as part of a standard reset):
*, *:before, *:after {-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;}
That seems to fix the issue, although on your next project, I recommend not setting fixed widths, but rather use width: 100% etc, as users on screens narrower than 300px will still have issues.
ok, so its a render issue on iphones and window phones. I cant replicate the issue on google chrome and samsung galaxy. Due to the below...
Put...
<section id="main-top">
<div id="bg">
inside the .container. You will have to re-assign your background. But the problem is with the nav and background and the positioning of these divs.
Your nav is full width but the container isn't, you have the section and div ending within the container but starts outside of it.
I have been able to get position: fixed working perfectly on a div outside an iFrame, but once it is loaded in an iFrame, position:fixed doesn't work anymore.
Is this a know issue (I haven't been able to find anything on the topic) or am I missing out an important piece of CSS, or meta viewport information? Is there a way to work around this?
Thanks!