I have responsive site which have an issue of scrolling because of iFrame.
# Problem
> Open site in iPhone in any browser
> list of images and video display
> Try to scroll down then it's work while images but when video then scrolling not worked because of video display in iFrame and iOS device not allow to scroll on `iFrame`.
Is there any CSS trick or any particular issue with iOS devices?
It's not work in iPhone / iPad.
NOTE: I do not want to scroll into iFrame but page scroll not working when touch on iFrame and try to page down. Got it?
Let me know if any one sort this issue or any trick.
Thanks
Try,
.iframe-container {
overflow:scroll !important; -webkit-overflow-scrolling:touch !important;
}
Try adding this to the iframe container:
-webkit-overflow-scrolling: touch;
Related
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)
When you scroll on a web page in iOS 7s Safari the URL bar shrinks and the bottom navigation bar disappears. In the site I am working on these two things to not happen.
The momentum/inertial scrolling was not working as well until I added -webkit-overflow-scrolling: touch; to the html element.
I can't imagine what element I have added to the code to have it lock up Mobile Safari like this.
Hoping this isn't a repeat question, it's hard to know what to call this besides "shrinking/hiding".
I accidentally stumbled upon the solution last night in an article by Maximiliano Firtman's article Breaking the Mobile Web. The article points out many issues with the new Mobile Safari in iOS 7.
The solution to my problem was close to his answer (his being if there is overflow: scroll; on your page it will not trigger the auto UI hide feature) mine was an overflow: hidden; style.
I have a problem related to scrolling of iframe in iPad-Safari.I am developing a web application, which contains some nested iframes and I am not able to scroll content inside the iframe in IOS (safari).
Nested iFrames can be scrolled with two fingers but is not very responsive or user-friendly.
apply this to iframe.
overflow:auto;
-webkit-overflow-scrolling: touch;
you can use this code just put the iframe inside a div and use the js code
github
How can I make the side panel content scrollable in case there are many items, without scrolling the content on the main page (in JQM 1.3 Beta)? I am trying to implement this for an application running on both Desktop and Mobile browsers.Have looked everywhere, but cannot find the answer.
I've made a div inside the panel that is scrollable, but this doesn't work on iOS4 and below without 2-finger scrolling (div within div issue in iOS).
Please, visit the following to find the answer to the above question:
JQM 1.3 panel + iscrollview + dynamically loaded
http://forum.jquery.com/topic/jqm-1-3-panel-iscrollview-dynamically-loaded-pages
jquery-mobile-iscrollview
https://github.com/watusi/jquery-mobile-iscrollview
.ui-panel-inner .ui-content myElement {
overflow: scroll;
-webkit-overflow-scrolling: touch;
}
You can make the selector more specific to a given element or just leave the "ui-panel-inner" if you want the whole side panel to be scrollable.
Note: The "-webkit-overflow-scrolling: touch" adds native inertia scrolling to the overflow and is not needed if all you want is scroll functionality. This should work on webkit browsers; mobile safari and chrome. But I have only tested it on mobile safari. It will not work on mobile IE but again, I have not tested it.