I have a web app built with jQuery Mobile that works fine when using it in Safari on an iPad. However, when you add it to the home screen to use it as a standalone app (with the browser navigation removed by , then the page transitions "blink" quickly after each page transition.
I have Googled on this and found that blinking was considered a bug a long time ago, and by now should be fixed. And it seems to be in Safari, but not as standalone from home screen. Does anyone know what is causing this and how to fix it?
Does it have anything to do with the fact that the navigation bar is not there? It works fine as standalone on iPhone though, it's only on the iPad that it occurs...
I would accept as an answer even if someone can show me that this is a known bug (not one of the old bugs that have already been fixed, where it flickered even in Safari mode) or if someone has inside knowledge about that (no one is answering my question at the jQuery forum either...). But of course I would love it if someone actually had a workaround for the problem!
i had exactly the same problem
http://mailinglist-archive.com/rhomobile/2011-08/00656-Re+rhomobile+page+views+and+transitions mentions something that worked for me.
<style>
/*** patch for jquerymobile page flicker that was happending ***/
.ui-page {
-webkit-backface-visibility: hidden;
}
</style>
I still get the flicker in the toolbar, so I converted my tool bar to :
<ul data-theme="b" data-role="listview" style="margin-top: 0;">
<li data-role="list-divider">Your text goes here</li>...
I was nervous about commenting out focus, but a google search found the following CSS that seems to work:
.ui-page * {
-webkit-transform: rotateY(0deg);
-moz-transform: rotateY(0deg);
transform: rotateY(0deg);
}
Original link: https://github.com/jquery/jquery-mobile/issues/2856
I was only having a problem with the slide transition (even reverse slide worked fine.
JQ 1.7.1
JQM 1.0.1
PhoneGap 1.5.0
Revision: It should be noted that the discussion below was mitigated with the release of iOS 5.0. It can be a partial influencing factor for anyone who hasn't upgraded but if you're running 5.0, Nitro is ever present. http://arstechnica.com/apple/news/2011/06/ios-5-brings-nitro-speed-to-home-screen-web-apps.ars
--original answer--
Apple introduced the Nitro javascript engine into the Safari browser. However, they only installed it on the browser, not in the UIWebView (which is what you get when you run form the home screen or embedded in an application like PhoneGap.
There has been some speculation if this performance boost was omitted on purpose. http://www.mobilexweb.com/blog/apple-phonegap-html5-nitro.
So, if it seems like it's actually performing slowly... that's cause it really is. It's not using the Nitro engine.
Adding this line
<style>
/*** patch for jquerymobile page flicker that was happending ***/
.ui-page {
-webkit-backface-visibility: hidden;
}
</style>
helped me.
I fixed it with:
<meta id="viewPortId" name="viewport" content="width=device-width; user-scalable=no" />
This only partially works for me:
<style>
body .ui-page
{
height: 100% !important;
-webkit-backface-visibility: hidden;
}
input { outline: none; }
</style>
$(document).bind("mobileinit", function () {
$.mobile.defaultPageTransition = "none";
});
Which prevent's flickering and whitespace at the bottom of the page but notice that transitions are turned off.
Also, id's are not being used more than once which I can verify with:
// an id used more than once??
var ids = new Array();
$.each($("[id]"), function () {ids.push($(this).attr("id"));});
var matches, val1;
for (var i = 0; i < ids.length; i++) {
matches = 0;
val1 = new RegExp(ids[i], "i");
for (var i2 = 0; i2 < ids.length; i2++) {
if (ids[i].length == ids[i2].length && val1.test(ids[i2]) == true)
matches++;
}
if (matches > 1)
alert("This id was used more than once: " + ids[i]);
}
Have also tried:
$.extend($.mobile, {
metaViewportContent: "width=device-width, height=device-height, minimum-scale=1, maximum-scale=1"
});
And loading the page into the DOM and only once that is complete doing the transition as so:
var promise = $.mobile.loadPage(url, {
pageContainer : $("body")
});
promise.done(function () {
var newPage = $("body [data-role='page']:last").attr("id");
$.mobile.changePage($("#" + newPage));
});
I'm still getting the flickering on page transitions.
the answer.... jquery mobile page flicker
Unfortunately, none of the suggestions actually solved the problem, at least not for me. However, finally it has been fixed in the latest stable version of jQuery mobile (1.1.0), so the problem is finally gone! I just had to go in and change the global transition back to slide, because they set it to fade:
$(document).bind("mobileinit", function () {
$.extend($.mobile, {
defaultPageTransition: 'slide'
});
});
Hope this helps someone else who perhaps hadn't noticed the update.
It seems that the following META tag solves the issue:
<meta id="viewPortId" name="viewport" content="width=320; user-scalable=no" />
It is a known bug. See the article in the seaside mailing list.
Rolf van der Vleuten noticed:
flickering can occur when using the same #id more than once in a page,
which is not unlikely when you are using the one page template method. so
be sure to not use #id's more than once.
I don't know why this happens, but I found out that when my first page had
an element that is outlined by default, flickering would occur, this was
fixed by adding:
input {
outline: none;
}
From the currently open issue, "Slide page transition causes screen repaint on iOS 5 chromeless", the recommendation is to comment out pageTitle.focus() from the reFocus function.
This however did not solve my problem. I found it necessary to remove both pageTitle.focus() and page.focus(), basically the entire function.
This issue (and specifically the change to the reFocus function) is also mentioned in issue 2474. It is a fix for iOS4 that did not solve my iOS5 iPad problem.
This seems to be a very very strange bug.I tried to fixed it.But failed.Finally I try to add some code to my project to avoid this issue.
If you deep into jquery mobile's page transition you would know his principle.
It loads another page's (the page you want to go) body into an element such as : .
I just add an wrapper outside of this element and make a setTimeout to delay showing this page.
I made a phonegap app in iPhone 4(ios5) and can't fix this issue.Just pray that jquery mobile team would fix this bug quickly.After spending a few days on this problem I just wanna fuxk jqm...
This only worked partially for me
<style>
body .ui-page
{
height: 100% !important;
-webkit-backface-visibility: hidden;
}
input { outline: none; }
</style>
for data transition "flip" it worked but not for "slide"
Related
I'm using popup over whole screen. When popup is opened I set body and html CSS to overflow: hidden and prevent screen from scrolling. In all browsers working fine and on the android devices also, but the problem is on the iOS devices. I cannot stop scrolling on the ios devices.
<html style="overflow: hidden;">
<body style="overflow: hidden;">
<div class="popup" style="position: fixed;">
</div>
</body>
</html>
I need clean CSS solution for this. I tried already to add position: relative, position: fixed but it's not working.
Any solutions?
I had the same problem some days ago and I finally came up with this.
Well, there is a very simple solution to solve this problem... All you
have to do is set that element to have a relative position. For
instance, if you were to specify for the body to hide the horizontal
scrollbars you would want to have the following CSS in your
stylesheet:
body {
position:relative;
overflow:hidden;
}
OR
Another method is adding jQuery if above doesn't work
we can prevent swiping by using something like so:
$('body').bind('touchmove', function(e){e.preventDefault()});
And to re-allow swiping again (i.e. when a menu or full screen modal is closed):
$('body').unbind('touchmove');
Hope this helps you :)
Sorry my English. After some days , I found this solution, it worked for me!
position: touch-action: none;
-ms-touch-action: none;
In my phonegap application I have a page that contains form elements. The problem is that when I navigate from home page to this page (form page) a white screen appears and then the form page appears. This screen occurs only once, when I open the form page after launching the app. This problem happens only for the form page, since the other pages in the application are showed directly.
I have set all transitions to none in my app, and tried to use fastclick, but nothing worked for me! How can I solve this problem?
Any help would be greatly appreciated.
Home page .js
document.addEventListener('deviceready', onDeviceReady, false);
function onDeviceReady ()
{
setTimeout(function(){ navigator.splashscreen.hide();} ,3000);
$('#GoToForm_BTN').on('click', function(){
$(this).attr('href','formPage.html');
} );
I have used this code in my css file but the problem remains
.ui-page {
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
overflow: hidden;
}
a, input, button {
-ms-touch-action: none !important;
}
*{
-webkit-transform: translateZ(0);
-webkit-transform:translate3d(0,0,0);
}
Without seeing any code it is difficult to locate the exact problem, if indeed there is a one. I believe that the problem can be located at the loading time of your application. If it is a multipage application (one html file), and depending on the size of the DOM tree created, it is natural that you are seeing this white screen. The DOM hasn't been fully loaded so you see a blank screen. The best thing you can do is to show a loading image when your application launches, and remove it when the page is ready.
I have a phonegap app that uses both AngularJS and jQuery Mobile.
I've noticed, that under ios, sometimes I get white flashes on page transitions - those are done using JQM's changePage.
I do have a fixed header and footer, which, by google, could be the source of the problem.
However, all results indicate that this was an issues that's already fixed in JQM, though it is still occuring in my app, which is running JQM 1.3.1.
Any ideas how to fix this?
Thanks!
EDIT:
I also tried adding user-scalable=no, disabling zooming and dropping data-position="fixed" from header and footer. None of these helped.
< meta name="viewport" content="width=device-width, initial-scale=1" />
to
< meta name="viewport" content="width=device-width, user-scalable=no" />
OR add this css
div
{
backface-visibility:hidden;
-webkit-backface-visibility:hidden; /* Chrome and Safari /
-moz-backface-visibility:hidden; / Firefox */
}
.ui-page {
-webkit-backface-visibility: hidden;
}
if this not works then check https://github.com/jquery/jquery-mobile/issues/4024
If anyone still stumbles with this, I found this post:
how to speed up changepage in jquery mobile for phonegap app
Even though it's not entirely related, the first answer (without the js code, though it might work with it as well) solved my issue, and improved rendering in android devices as well.
I am using CSS media queries to create a web site with responsive design. When I open my test page on the iPad in either landscape or in portrait orientation, it looks fine.
However, when I switch from landscape to portrait mode, the page is shifted to the left. I can tell that the correct CSS is loading because other things on the page change. I can also drag the page to the right and it appears exactly as it does if I had opened the page in portrait initially.
I have my viewport set to:
meta id="view" name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0"
I added JavaScript to fix the iOS viewport scaling bug which used to cause the page to be zoomed in when switching from portrait to landscape. (I used the solution described here: https://gist.github.com/901295 )
I'm having problems finding the name for the bug I'm experiencing when switching from landscape to portrait. Has anyone else seen this or know how to fix?
The problem owner says that she "can also drag the page to the right and it appears exactly as it does if I had opened the page in portrait initially."
This makes me think that, for some unknown reason (a bug?), the page is scrolled to the left at an orientation change to portrait mode (otherwise you wouldn't be able to drag it back).
I had a similar issue and solved it with the following JavaScript workaround:
// ...
// Optionally add a conditional here to check whether we are in Mobile Safari.
// ...
window.addEventListener('orientationchange', function() {
if (window.orientation == 0 || window.orientation == 180) {
// Reset scroll position if in portrait mode.
window.scrollTo(0, 0);
}
}, false);
Maybe this will work for others too.
I managed to sort my similar issue out - perhaps this will work for you?
You'll need to work out if it's a particular div or other element that's causing it by deleting/reinstating different bits and retesting the page. Once you've worked it out try adding an overflow: hidden property to that element in your CSS - I used overflow-x: hiddensince my issue was horizontal scrolling but you may need to vary it.
Hope this is of use... good luck!
Jereon, your JavaScript worked for me. My viewport is:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />
I'm using the Drupal Corporate Clean responsive theme. I have not had this problem using the Omega responsive theme framework.
The solution for this is as proposed by #ellawson
Problem is caused by some element not being scaled correctly by the browser when rotating the device. Find that element and apply overflow: hidden; or overflow-x: hidden; as he says.
Note: this question is a duplicate. I'll post the gist of my answer here.
2015 update
All the other answers are unfortunately incorrect, outdated, or misguided. Here's what works:
window.addEventListener('orientationchange', function () {
var originalBodyStyle = getComputedStyle(document.body).getPropertyValue('display');
document.body.style.display='none';
setTimeout(function () {
document.body.style.display = originalBodyStyle;
}, 10);
});
The code listens to the orientationchange event and forced a re-flow of the body element by hiding it and showing it 10 miliseconds later. It does not depend on any <meta> tags or media queries.
You said,
When I open my test page on the iPad in either landscape or in portrait orientation, it looks fine. However, when I switch from landscape to portrait mode, the page is shifted to the left
That is key. You just need to force a re-paint of the body.
Answers that suggest adding <meta name="viewport" content="width=device-width, initial-scale=1.0"> or variations thereof, as of Safari 7, no longer wors. Here's a demo. To make sure you see how it doesn't work, start with the iPad in landscape mode, load the page, then rotate. Notice the page doesn't expand to full height, despite using flexbox all the way.
Compare that to this page, where we use the hide/show body technique in production.
I came across this problem with an iPad and applied html { overflow-x:hidden; } . That seems to have resolved the issue.
try adding the following setting to your content properties: maximum-scale=1
or try this: user-scalable=no
here is the ios documentation
when using [-webkit-overflow-scrolling: touch;], the scrolling area does work well,
but it causes touch events stopping work out of the scrolling area.
Is there anyone had the same problem? Who can give me some official links about this new scrolling feature?
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ios5 scroll</title>
<style type="text/css">
header {
background: red;
width: 300px;
height:44px;
}
.scroll {
width: 300px;
height:300px;
background: yellow;
overflow: scroll;
-webkit-overflow-scrolling: touch;
}
</style>
</head>
<body>
<div id="container">
<header>
<button onclick="alert('header');">won't work?</button>
</header>
<div class="scroll">
<button onclick="alert('scroll');">It works</button>
<div>text</div><div>text</div><div>text</div><div>text</div><div>text</div><div>text</div><div>text</div>
<div>text</div><div>text</div><div>text</div><div>text</div><div>text</div><div>text</div><div>text</div>
<div>text</div><div>text</div><div>text</div><div>text</div><div>text</div><div>text</div><div>text</div>
</div>
</div>
</body>
</html>
2011-12-27: I have fixed this problem but I still no wonder the real reason.
In my case, I have several sections in one web page, each section has a scroll area and a header, each time only one section is showed and use css3 animation combined with transform to switch sections. when add [-webkit-overflow-scrolling] in the scroll area of all sections, touch events stop working randomly, so I just add [-webkit-overflow-scrolling] in the section which is showed currently and remove it when the section is hidden. That works well but I still don't know what causes this problem.
I have the same issue, and I can also replicate it every time. I have a page that resizes elements to fit the screen when the orientation of the iPad changes. If at any point the element no longer needs to scroll, it will stop doing so thereafter even if the element is resized back to where it needs to scroll (e.g. flipping back to landscape for me). So it's definitely a bug, but I do have a workaround:
When resizing the element, I'm resetting the -webkit-overflow-scrolling to auto, then setting it back to touch. However, you have to introduce a delay between the two (50ms is working fine, didn't try any lower). So what I did was added an attribute of "scrollable" to the elements, and used the code below (using jQuery):
$("[scrollable]").css("-webkit-overflow-scrolling", "auto");
window.setTimeout(function () { $("[scrollable]").css("-webkit-overflow-scrolling", "touch") }, 100);
Hope this helps!
This is caused by having an <iframe> on the page. Many scripts create <iframes> to do their work including social tracking buttons (Facebook, Twitter, G+), analytics tracking (Google, etc.), and libraries like PhoneGap.
It doesn't matter how the <iframe> is displayed. display: none; visibility: hidden; width: 0; height: 0 does not fix it. If an <iframe> is on the page it will happen, sometimes intermittently and sometimes always.
The only solution I've found so far (which is turning out to not be very workable in a production app) is to delete all <iframes> on the page, create them only when needed (for example, when I need to call a PhoneGap API), and then delete them when finished.
I confirm I saw the same issue on a web app using extensively touch events and list scrolls.
Before iOS5 I was using iScroll, and everything was working fine;
With iOS5, I used -webkit-overflow-scrolling:touch to scroll lists to get faster scrolls.
The consequence is I met random occurrences of touch events no more working on various parts of the app. The issues generally occur after I scrolled a list. it affects randomly elements outside the scrolled area, typically a footer menu.
Reloading the app when in 'frozen touch' state doesn't unfreezes it : to unfreeze it, I had to close the safari tab, open a new one and reload, until I met again the issue while using the app.
The issue is seen on iPad2, iPhone 4, iPhone 3GS, all on iOS 5.0
Eventually, I deactivated the overflow touch scroll and came back to iScroll, and things work well as in iOS4 .
-webkit-overflow-scrolling + CSS3 Animations + Phonegap API calls = touch stops responding.
My phonegap app will work fine until I make a call to a Phonegap API, at which point the touch will stop responding on mainly the first element that has a event attached to it in the current view. A view for my app is body > div.current with the rest of the divs display none.
I can replicate this every time.
It is clearly a bug in iOS5.
Here's a variation on a few of the answers already listed.
My specific issue was that reorientation caused scrolling to stop working completely when -webkit-overflow-scrolling: touch was applied to an element.
Example: Landscape orientation is shorter and needs a scrollbar. Portrait is tall enough that no scrollbar is needed. Reorient to landscape; scrollbar is present but non-functional.
listen for the orientationchange event
do something which triggers a layout change on the scrolling element
ensure that the change is significant enough that the rendering engine doesn't optimize it away. For example, hiding then immediately showing does not seem to do anything. Anything that uses setTimeout() seems to work (perhaps it is the different execution context, I don't know).
Fading in and out works, or hiding and then showing with a short delay works (though it flashes). #Sari's solution for changing the scroll properties works and does not cause any visible redraw.
$(window).on("orientationchange", function () {
// use any valid jQuery selector
var elements = $("[data-touchfix=true]");
elements.css("-webkit-overflow-scrolling", "auto");
window.setTimeout(function () {
elements.css("-webkit-overflow-scrolling", "touch");
}, 100);
});
Note that I haven't tested this fix beyond my iPad 3 other than to ensure that it doesn't cause script errors in Chrome or IE 7/8/9.
In case this is of any use...Incorporating PhoneGap I was using Zepto to append ajax-loaded, scrollable content into the dom. I was then applying a css transition on it. There were no iFrames on the page.
I was experiencing the same issue as mentioned here, where scrolling would just stop working. When I copied the generated code into a separate file and tried that on the iOS simulator - everything worked as expected.
I eventually got it to work by querying the height of the parent container - just before the css transition. By adding var whatever = $('#container').height(); the scrolling worked.
To improve a little bit ThinkingStiff's excelent answer, you can avoid blinking
- if overflow:hidden is set
- if instead of 'auto' value just remove property:
$('.scroll').css({'overflow':'hidden','-webkit-overflow-scrolling':''});
window.setTimeout(function () { $('.scroll').css({'overflow':'auto','-webkit-overflow-scrolling':'touch'})},50);