In my app I am displaying website using the WKWebView component but since the website has <iframe> content, scrolling does not work. The iframe content itself registers taps and swipes but it never scrolls.
When I open the same page with Safari it works well, I can interact with iframe's content and scroll without any issues.
My iframe takes full width and height of the webpage and I added this property:
-webkit-overflow-scrolling: touch;
But it does not help. Unfortunately I cannot show the webpage in question because it contains proprietary data and is behing login screen.
I would prefer to solve this without having to modify the webpage, since Safari works fine.
EDIT: It looks like the iframe might be detecting the events and not "forwarding" them, because when there is also for example navbar on the page (that is not part of the iframe) I can swipe it and scroll. However since there is very little space on the screen, I would prefer not to have any other elements apart from iframe itself.
EDIT 2: I tried to display the page from iframe directly in the WKWebView but it still does not scroll at all. Works great in Safari.
Solution: In the end I solved the issue by changing the userAgent property of the WKWebView to match either iOS 12 Safari for iPhone or iPad depending on the device. The website in question is fairly complex regarding user interaction so I guess they were sending "incorrect" settings to the browser with the default user agent.
I would look for scroll-blocking event listeners that might conditionally load. If you have some kind of touch, touchmove, click, hover javascript events they might interfere with the default logic by using e.preventDefault().
Also you need to look for such events both in framed page and host page.
Try to replace a host page and framed page to see if scroll works well with different URLs.
Try placing the iframe in a div with -webkit-overflow-scrolling which takes up the full view and make the iframe the the size of it's content.
Example from: https://coderwall.com/p/c-aqqw/scrollable-iframe-on-mobile-safari
<div style="overflow:auto;-webkit-overflow-scrolling:touch">
<iframe src="./yxz" style="width:100%;height:100%">
</div>
You may have to get creative with resizing the iframe to match it's content (see: Adjust width and height of iframe to fit with content in it)
Related
I was trying to embed my code on my new google site but it looks like there is an extra scrollbar on the embed code section. At first I thought it was the size too short but after I have adjusted the size is still the same, I still can see the scrollbar from the embedded code section.
Does anyone know how to prevent this?
To disable scrolling for embed code, add :
<script>
parent.document.getElementsByTagName('iframe')[0].scrolling="no";
</script>
This changes the scrolling value of the parent iFrame ( scrolling="yes" ) to no.)
You can change the no to auto in the code if you want it to add scrolling automatically.
As #Vico said, you can remove the scrolling with the added but that will most likely just remove scrolling and not make your embed URL Responsive.
Unfortunately there is not a way to actually communicate your mobile environment from your google site to your embedded URL because the new google sites embed uses iFrame. The only work around would be to increase the size of your embedded container on your google site drastically. Once you do that you should be able to view your full webApp or what not on your site with no up-down scrolling but you may still see side-to-side scrolling. To remove that you van add
<body style="overflow: hidden;">
and it will be hidden.
Maybe this trick will help: Expand the inserted "Embed < >" box's boundary. (from
Auto adjust heigth of Google Site embed code (html))
I've got an Adobe Edge JavaScript and CSS3 animation's EdgePreload HTML page included in another page, using the iframe tag. It works nicely, but when I try to use -webkit-transform:scale(0.5,0.5), the iframe itself scales from being 1600 x 900px, to 800 x 450px, but the contents remain the same size. I would post a link to the file, but it's currently offline. If you need any other information, please say so.
On transformation is the IFrame getting relaoded?..if not that is the issue for not resizing.. the contents are aligned based on load iframe size. Please try to relaod the Iframe after you transform..
If a relaod is impossible might have to explicitly access Iframe DOM and resize content in that case CROSS DOMAIN POLICY will come into play and will be tedious..
I have a "simple" web application that has a navigation and a content area.
Within the content area I have a iframe with more complex content. Unfortunately the content in the iframe has another iframe.
The get an overview look here:
.
In my scenario it is quite helpful to see the full iframe content, so we hide the navigation and change the content size on top of it:
If I go back now to initial view the iframe inside the iframe doesn't change the size:
This happend only on Safari mobile (iPad) OS 5.1. On normal Safari browser it works as expected.
Does anyone have a similar problem or an idea what is happening here?
Of course a solution would be even better :)
If this is an issue that only occurs in Safari or iPad you could add some cross-browser CSS support to tell the specific browser how it should appear. I like using this one
This allows you to add specific css instructions such as
.[os].[browser] .mylink { font-weight: bold; } -> without space between .[os] and .[browser]
.iphone.safari .scrollingframe {css style}
Hope this helps.
Hi I want to disable the resizing the html web page by the user. How to do that
I want to disable the resize button and manual resizing by dragging. pls help
You can't, thank God.
When you open a new popup you can request it be unresizable using the feature resizable:
window.open('something.html', '_blank', 'resizable=no');
however modern browsers may ignore your request as it is considered egregiously user-hostile.
Use liquid layout to make your page respond flexibly to changes in window size, rather than attempting to set it in concrete. The web is inherently a variable-size medium, and mobile browser users get no input in how large their screen is anyway.
Pardon? Are you talking about resizing the browser window? If that's the case then you can't do this in HTML, or JavaScript as it would be a security risk allow web pages to control browsers behaviour.
If you want to get rid of scroll bars you can set the body tag to 'overflow: hidden' in CSS?
If you mean to stop the page shrinking and expanding in sympathy with browser window size, then use fixed width elements as supposed to relative (%)
I have content in an iframe, and when I scroll the main page (outside of the iframe), I get weird artifacts inside of the iframe, from the select and flash controls, in IE6.
How it should look (and does look in IE6 before scrolling the outer page):
How it looks after scrolling the outer page in IE6:
It works fine in other browsers, including IE7+. If I load the content within the iframe directly, and scroll the page, it doesn't happen. It only happens when it's embedded in the iframe.
It seems as though certain controls within the iframe are scrolling with the outer page.
Thanks!
Your best bet may be to hide the iframe during the scroll event, or reflow the iframe after that event by resizing its width 1px smaller and then back to its original size. A reflow of the iframe should cause a redraw. You probably won't be able to make IE6 play 100% nice with iframe scrolling, etc.