I want to have a web site appear on an iphone with an iframe that takes up 1/3rd of the height of the screen, and 100% of the width. Inside this iframe i want to have a very wide page for the user to flick scroll through, but when that is scrolled i don't want it to affect the rest of the page outside the iframe.
I've done this with some simple html that works fine on the desktop in all browsers by setting the iframe's width to 100%, however on the iphone it forces the entire page to the width of the iframe's contents, and scrolling of the iframe contents is not independent of scrolling of the rest of the page.
Can anyone suggest why? I have a suspicion that iframe contents are inlined on the iphone to save ram...
The iPhone Safari browser uses HTML 5, which doesn't specify required support for scrolling iFrames. I've seen several other users with the same problem, but I'm afraid it won't happen inside of the iFrame element.
You can also check out the JQTouch JavaScript library, some users have found success with their tools.:
http://groups.google.com/group/jqtouch/browse_thread/thread/23fdfd81ed7cd004?pli=1
http://www.w3schools.com/html5/tag_iframe.asp
Related
I have a news section on a page, when i click on a news a fancybox iframe is opened showing the news page.
The news page contains 3 images on top ad some text on the body of the page, and on page load i create a new Swiper slider with the images.
Unfortunately on iOS Safari, creating the slider with those images make the content of the iframe being incorrectly sized.
This behaviour only happens on iOS Safari because if i test in chrome with device toolbar enabled everything works as expected.
I've attached a video of the issue at this link
First, fancybox works fine. The script attaches load event to iframe element and then (inside that event) reads width/height of body element and uses these values to resize iframe parent element so that iframe dimensions matches page size.
If you (or some 3rd party script) change layout, then, obviously, page dimensions will change, too. In that case, you can execute parent.jQuery.fancybox.getInstance().update(); (from within iframed page) to call update method that will do resizing again.
I am coding a simple app in Xcode and I have ran into a problem. I can not get links to work on the mobile app that go to other links. For example, if I click on the Twitter button at the bottom of the webpage nothing happens, I want that button to lead to the desired link it was supposed to go to. Also, the words in a page on the site are lined up in a vertical column, and I would like to know how to make the text look better in terms on formatting it correctly. Here is a picturePicture Of Simulator The Code
[Image]
Seems like you're adding your WKWebView the right way and the page is loading fine. The problem with the text is actually coming from the CSS of the site as I have the problem in Safari on my phone as well, so if you are the web admin of the site I'd fix it there.
Did you try if the button you are talking about is responsive when accessing through Safari on your phone/simulator? WKWebView does not have a loading bar and it seems "unresponsive" sometimes even though the sites are loading in the back.
When adding your WebView implementation buttons like the privacy policy on the site work fine for me.
Working on a one page app in html5, I'm using transform: translate3d to navigate between the different pages.
for one of this page I call an ajax request to feed it with a list of 150 elements.
After injected those elements, I show it with: translate3d(0, 0, 0)
This works for android, and all desktop browser, even safari, iphone safari load the list only after the page appearance.
so instead of
call Ajax => inject in hidden Page => show hidden Page
it goes like
call Ajax = show hidden Page >=> inject in hidden Page
In both case the data are present in step 2.
When I reduce the number of Data it works fine
so it's seems that create the DOM when it's outside the viewport is slow rendering in safari Ios, maybe some one experimented the same problem ?
solved:
-webkit-transform: transform3d(0, 100%, 0) put the page outside the viewport.
Safari on IOS seems to be slow rendering what he can't see, so I use this:
-webkit-transform: transform3d(0, 99%, 0) and it works perfect.
This page is empty so no problem to let 1% in the viewport.
Lot of issues with Safari on IOS with that rendering.
I'm trying to get Fancybox to center up on the screen within a facebook iframe app. Everything works fine on my test page outside of FB but once I put it in my app it shows up centered according to the iframe height not the viewable screen. I have also noticed that the 'centerOnScroll': true is also ignored when using inside FB app. Any suggestions would be great and much appreciated.
Centering in a iframe according to it's viewable height is generally not workable. Have a look at the following answer.
Fix an element inside an iframe in the center of the screen
With a Facebook iframe canvas app, is there any way to launch a modal pop-up (such as when clicking to magnify a photo, similar to http://fancybox.net/) that extends outside the bounds of the iframe's width? I'm thinking there would have to be some sort of communication with the _parent, but I'm not sure what's allowed or how to approach this.
In short, you can't.
Your application lives within an iframe within Facebook. You can't alter Facebook's code outside the frame (against their policy).
You can pop up a new browser window in full screen, if you'd like. But I'd question that as far as user experience goes.