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.
Related
We've implemented fancybox iframe popups throughout our system and it works great, but I've noticed these annoying horizontal scrollbars popping out on the outside of the frame. We get scrollbars where necesary inside our content area, but these ones just show up 100% of the time even when there's nothing to scroll. I've tried a number of things with CSS but have not had any luck thus far. Screenshot below to show what I'm referring to.
Any ideas?
https://ibb.co/88ZhBbX
EDIT: https://ibb.co/82bPxkd - image showing overflow being set to hidden on iframe and wrapper container.
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)
I've seen a similar question but it's quite different.
I have a div that i want scrollable. It works fine in Chrome and Firefox but doesn't work in Safari. At least it doesn't work when i load the page. I have to resize the window or zoom in/out the page for the scroll to "unlock". This only affects mouse wheel scrolling. The traditional drag scrolling works well.
The test site is here: http://dmd.esad.pt/e512/final/index.html
I solved it with $(window).load function and with help of malihu's jquery custom content scroller but i believe i could just use a simple .load
I have the content of my website in an absolute positioned div that fills the whole screen. The scrolling on this div is normally clunky, as it's not the native momentum scrolling. Solution? Append -webkit-overflow-scrolling: touch; to the div.
Momentum scrolling works now, but when I scroll down the page, the div elements aren't showing up. The console shows no errors, nothing is wrong with the actual page, but the individual posts (the div's) don't show. Here's an example:
Can anyone confirm this on their iPad, or suggest a fix? I'd rather not use something along the lines of Scrollability. It might be that the iOS6 beta is causing this, but I'd like to be reassured.
You can view this site on your iPad
And if anyone wants me to explain my bookmarks, I will gladly do so.
Currently .post CSS class uses position: relative. If you remove that line, the issue goes away. Apparently relatively position elements are hidden when not within the view. Not exactly sure the why the iPad does this or if it is a bug. In my experience, iPad devices try to run as efficiently as possible. For example, if you scroll JS animations are frozen. Perhaps this is a technique to make iPads render pages more efficiently. Hopefully that helps.
This article maybe be related and have a work around: CSS3 property webkit-overflow-scrolling:touch ERROR
Using '-webkit-overflow-scrolling: touch' hides content while scrolling/dragging
I'm working on a website that has rich content displayed in a Unity window. However, this Unity window sits under a navigation menu that has drop-downs, and drop-down menus are going behind the Unity window.
With Flash, this was easily solved by setting the wmode property to transparent. Is there a similar solution with Unity, or a different solution entirely that works and allows me to place standard HTML over the top of Unity windows?
Thanks in advance.
Some related posts on unity forums
http://forum.unity3d.com/threads/22270-Unity-Flash-Div-issue-in-Browser
http://answers.unity3d.com/questions/10599/does-unity-have-an-embed-parameter-equivalent-to-f.html
The answer: there isn't a way to set some equivalent of the flash wmode=transparent but there is a workaround with setting the css visibility:hidden (or resizing to width:1px & height:1px)
So, kind of a hack, but you could set the menu's hover event to change visibility of the unity window as a workaround.
Old post, but this might help someone.
I can get HTML to display over the Unity window in Safari, Chrome, Firefox on my Mac and Windows IE 10 & 11 with a div. I can get it to always display with an iFrame in all windows. The trick with the iFrame is not all browsers support transparent iFrame, so sometimes you will see the iFrame, but not transparent. IE 8 does not support transparency at all and if its set to be on, then the iFrame will not display above the Unity screen.
DIV:
I basically float a DIV over the unity content. Content can be either plain HTML or Flash. Opacity seems to help make it work.
My situation is we have a menu that needs to display over the top part of the Unity window. Note that Unity is NOT in full screen mode, but sits in a Div. Maybe this is why I can do it??
Anyway- the code looks something like this:
<div>
<div><unity object></div>
<div style="position:absolute; opacity:.9">html or flash content</div>
</div>
The iFrame approach works fine for content that is always the same size, but if you have something like a combobox, then its an issue because the window needs to first resize the height to show the drop down, and then the iFrame background will cover all the content. A hack, is to open a SECOND iframe with the combobox. Sucks, but that is the way I had to do it..
hth-
Dustin