I have a webpage with several IFRAMEs. When searching this page using the browser the matches in the IFRAME are cycled through after all the other matches in the main page has been cycled through.
This causes the page to jump up again, and the matches are not selected in the same order as they appear on the screen.
To see how this works check e.g. this page and search for news.
How do I make the content of the IFRAME be searchable in the same order as it appears on the screen?
I am developing this page only for webkit, but I observe the same behavior with firefox.
Related
I've got an issue going on with my CCleaner internet web browser (which is built on Chrome). These silver-white borders appear over elements on web pages, and even the whole page itself, whenever I click on such an element. It only happens inside the CCleaner browser window, not in "regular" Chrome.
Here I would like to provide an example, taken from my edit account settings here on Stack Overflow dot com (a page you can look at that is exactly the same as mine except for my issue with my web browser).
OK so in that pic the border you see around the text entry box is what I get all the time. The box is not permanent; it slowly fades out and dissolves.
How do I prevent these silver borders from appearing in the first place?
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 have a problem with a website I'm working on. Using the Safari browser, while the page is loading, the video control appear just for a second (like on the image) and then it disappears.
The main page of the website has a full-screen video but I set the controls=false in the attributes. And the main problem is that it always appears, also when there is no video in the page is loading. How can I hide it?
controls is a Boolean attribute so its very presence means that it is true, regardless of what you set it to.
Try ommitting it entirely.
I've been working on a website ( http://www.clicks1.co.uk/#Contact ). However I've come across a bug in which many of the 'click' interactions on the page don't work on some Iphones but do on others. I've found it to work perfectly on an Iphone 5, but not on an Iphone 5s.
Specifically in the contact area, the hyperlinked facebook, twitter, and google+ images do not open the links when tapped on an iphone 5s.
It was my thinking that perhaps there's some kind of element overlaying the hyperlinks blocking any attempt to press them. Still not sure why this would only be an issue specific to some iphones and not others.
The solution was to create an invisible absolute positioned div with a high z-index. This div was then positioned above the original hyperlink element and given a href link.
If like me you want to use this solution over dynamically sized images/text then I found giving width and height parameters % (eg width: 40%) values allowed them to resize with the elements they were above.
This usually happens when there are other 'invisible' elements on top of the hyperlinks.
Use the browser's developer tools to inspect the link and see which HTML element it selects. If it selects one other than the hyperlink, than chances are that element is superimposing.
Sometimes a 'clear:both;' on a mediaquery is all it takes to fix problems like this.
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..