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.
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 have done my application in iphone using phonegap and jquery mobile. It is major project and it is totally completed. But there is one problem , in application pages load using rel="external" , when page changes one to another page in between 2 to 3 seconds screen display totaly white, that time don't want to display white screen. Anybody idea what can we do for that ? and don't reply with remove rel="external".
First of all you will have to make your native webview transparent then
Try giving css style to body as
body{
background-color:transparent;
}
I am using addthis thirdparty tool for facebook and twitter like button , The twitter like button rendering parallely with the page but facebbok button renders a bit late, after the whole page, I am using it like that :
a class="addthis_button_facebook_like" fb:like:href="#"
Is there a way for rendering it same time with the whole page ?
Unfortunately, it isn't possible to guarantee when the buttons will be rendered. All the buttons will load at different times depending on how fast the resources (JS/CSS) are loaded and how quickly the code executes to render the buttons. This is done to make sure your page always load and doesn't get blocked by the buttons loading. The reverse could happen where Twitter loads slowly and Facebook loads quickly. Is there a functional reason for wanting them to load at the same time? If so, you could "hide" the div containing all the buttons and then have them all appears after a certain amount of time to increase the likelihood that all buttons have been rendered. I hope that makes sense.
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
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