I am quite new to Jquery Mobile Framework.
I am using page transition in jqm .. Using this i am getting flickering issues while loading the content.
I used:
changepage("#id",{transition : "slide"})
There is no issue in the transition effect, but the flickering makes my site bad.
I used version : 1.2.0 jquery mobile js and css and jquery 1.8.2
Where you are getting a flickering? On Android or on every device?
Anyway, you can try to use their recommendation:
.ui-page {
-webkit-backface-visibility: hidden;
}
Another check that you can try is here.
I had this problem as well. What I did was disable the transition.
If you are still having flickering without the transition then it might hint that the JavaScript is taking too long to run. You can fix this by simplifying the CSS and JavaScript until the flickering stops or by checking the performance of the page by using Chrome DevTools like this blog post suggests.
Related
I have ran into an iOS ONLY specific bug which i cannot seem to wrap my head around. I am currently rendering an iframe on a website which is fetching content from another one of my websites. The content in the iframe is displayed within a responsive slider. The slider works by getting the full width of the window and times that by how many slides there is.
To make it responsive it will recalculate the widths on jQuery(window).resize. At this point i would like to add that i have tested this on all browsers on pc and its fine, ive tried it on all android browsers and guess what, they all work fine. As soon as i take it to IOS for testing is where the problem begins.
It works fine if you visit the dedicated website. However, When you view the content through the iframe, the javascript code thinks that the window is being resized which means its constantly resizing (getting bigger and bigger) making it dissapear of the screen making the window continually wider everytime.
HTML
<div class="iframe-container">
<iframe scrolling="no" src="*url removed*"></iframe>
</div>
CSS
.iframe-container iframe{width: 100%; min-height: 560px; border: none;}
Im thinking that its possible related to the content within the iframe ignoring the meta viewport tag or something?
Im unable to post a link to the issue due to client privacy reasons.
If anyone could shed some light on this, it would be much appreciated.
Thanks,
Lewis
In case it's still relevant or for anyone brought here by search:
Find the element inside the iframe which makes the window get bigger and bigger. Add max-width: 100vw; to its styles.
This helped me to fix a similar issue which also occurred only on ios and only when the page was loaded in an iframe.
I know iPhones used to not support position:fixed, but now it does and I'm seeing a weird glitch when I scroll a fixed position element behind other elements with higher z-index. The fixed positions element with the lower z-index appears in front momentarily, which looks really bad. Is there a way to prevent this?
I tried adding -webkit-transform: translate3d(0, 0, 0); to the fixed element and it doesn't seem to help this problem.
Here is a jsfiddle as well.
Update
I added transform:translateZ(x) in addition to the z-index and it did not fix the problem.
Update2
I added -webkit prefix and this DOES fix the z-index problem on an mobile Safari, but also causes the position:fixed to work incorrectly in desktop Chrome.
z-index is not reliable with position:fixed, as shown in this fiddle: http://jsfiddle.net/mZMkE/2/ use translateZ transformation instead.
transform:translateZ(1px);
on your page elements.
EDIT:
In your code,
Add this css:
.bla, .projects, .contact {
-webkit-transform:translateZ(1px);
-moz-transform:translateZ(1px);
-o-transform:translateZ(1px);
transform:translateZ(1px);
}
and then remove z-index refs from those elements and .intro.
Update 1: I added transform:translateZ(x) in addition to the z-index and it did not fix the problem.
Update 2: I added -webkit- prefix and this DOES fix the z-index problem on mobile Safari, but also causes the position:fixed to work incorrectly in desktop Chrome. "
Then try to wrap -webkit-transform:translateZ(x) in a mobile specific media query.
For example:
#media only screen and (min-device-width : ... ) and (max-device-width : ... ) {
.whatever {
-webkit-transform: translateZ(x)
}
}
So in this case it won't do anything on desktop Chrome
I tried the solution accepted as an answer in a specific case when I needed to set different position in the stack of different layers, but that alone didn't work both in desktop browsers (firefox and chrome) and Safari iOS
I came out with this hack which uses both translateZ and z-index for each div, which is working in those platforms. The order of translateZ and z-index is important. For setting each layers position is
-webkit-transform:translateZ(1px);
-moz-transform:translateZ(1px);
-o-transform:translateZ(1px);
transform:translateZ(1px);
position: relative;
z-index: 1;
I used the same value for the z-index and translateZ just for consistency, it is not necessary.
See working example http://jsbin.com/peyehufo/5
I'm not advocating for this solution, but it's the best I've got at the moment...
In order to replicate the effect of z-index with position fixed on an iPhone, it seems to require two techniques together:
As suggested by #tnt above, use transform:translateZ(n) where z-index is used to get mobile safari to handle the stack order correctly. This appears to have the unfortunate side-effect of causing the position:fixed to stop working...
Instead of position:fixed, use a javascript technique like this to fake it.
I haven't tested this thoroughly (because I'm not going to do it), but it seems to work fairly well. Although the "fixed" element seems to stutter a bit.
I have a mobile application running Backbone.js and jQuery mobile. Because I have Backbone.js and for performance reasons I have disabled all the JQM routing and transitions. I understand that storing scroll location is a feature available in JQM, but I am unable to utilize that (as far as I know).
I have a list view with a potentially long list of items. When the user taps one on the mobile device, it stores the current scroll position and renders a new view. When the user taps the "back" button, it goes back one in the history.
clickLink: ->
window.lastScroll = $(window).scrollTop()
render: ->
...
if window.lastScroll
$.mobile.silentScroll window.lastScroll
window.lastScroll = undefined
This works as desired on desktop Safari, but when I try it using it on iOS Safari (both simulator and the real thing), there is an issue with the fixed footer navbar.
If the user taps back, the listview is scrolled down as intended, but then if they tap the footer navbar, it is as if they tapped under it, whatever list item is under it will be activated instead. If the user scrolls a little bit before tapping the navbar, everything works fine.
Does anyone have any ideas? Perhaps there is a better approach that would avoid this issue all together.
Thanks in advance for the help.
Could it be related to this bug?
Form elements can lose click hit area in position: fixed containers
(linked from here JQuery Mobile 1.1.0 docs )
I see there is a workaround in the first link - worth a try?
Chad Smith Answered this Mobile Safari bug on fixed positioned button after scrollTop programmatically changed...?
His method worked best for me. Here is his response:
I got around it by adding a 101% high div then (almost) immediately removing it.
Try:
<style>
.iosfix {
height: 101%;
overflow: hidden;
}
</style>
and when you scroll:
window.scrollTo(0, _NEW_SCROLLTOP_);
$('body').append($('<div></div>').addClass('iosfix'));
setTimeout(function() {
$('.iosfix').remove();
}, 500);
It also works with jQuery.scrollTo.
See an example here.
When navigating between pages using jQuery Mobile and PhoneGap on iPhone, there is an annoying white flash that displays just before the new page loads. A simple link like this will cause this:
User details
How can I fix this? A reasonable workaround may have been to change the white flash to the same color as my web page background color, but I don't know if this is possible either.
Update:
I'm using PhoneGap 1.5.0 (aka Cordova), jQuery 1.6.4 and jQuery Mobile 1.0.1 on iPhone IOS 5.1 and 5.2.
The problem appears to persist in Safari desktop (although much less visible). There is no problem on Firefox.
Update 2:
The flashing is definitely caused by marking the link as rel="external". Unfortunately I am linking to jQuery Mobile multipages, so this is necessary.
A combination of jQuery Mobile 1.1.0 RC2 (just released) and jQuery 1.7.1 does not suffer from this problem!!! Wonderful. Great work from the jQuery Mobile team. I know this bug was haunting them!
UPDATE:
If you still see a flash, you can drastically improve the user experience by supplying a common body background color in your CSS. For example, if you are using a dark theme, then adding this to your theme's CSS will change the 'white' flash to a 'black' flash:
body{
background-color: black !important
}
Also, if you could get away without using rel="external" in your links, then the flash will be gone also. Unfortunately, depending on your design, this will possibly screw up your navigation.
I just updated to qQuery Mobile 1.1.0 final. The flash is visible when linking to external pages, i.e. not using multipage, but the flash is only a problem if the page you are linking to is complex (large) and takes a while to render. In those cases, keeping a consistent background makes the user experience quite alright.
Removing the page transition effects will also keep the interruption to a minimum by including the following javacript before including the jquery mobile library.
$(document).bind("mobileinit", function(){
$.mobile.defaultPageTransition="none"
});
This is working for Cordova 3 and Cordova 2.9
So as mentioned above after you set your app's background color via CSS like this:
body{
background-color: #000;
}
Go to your CordovaXlib.xcode.proj and look for your "Classes" folder
MainViewController.m
line#142
Uncomment the "webViewDidStartLoad" method or function and just add
self.webView.opaque=NO;
So you will have something like this:
- (void) webViewDidStartLoad:(UIWebView*)theWebView
{
self.webView.opaque=NO;
return [super webViewDidStartLoad:theWebView];
}
It would be great if you could tell us which version of jQM and which version of PhoneGap does this for you. I assume from your tags you experience this on iOS, which version of iOS though?
try setting the following CSS property
-webkit-backface-visibility: hidden;
and let me know if it helps.
This CSS rule comes with a word of warning though. It has caused problems for me on Google Maps and with Forms. Use it sparingly and only if you really need it.
In the Xcode project left panel, open the 'Classes' folder, then the 'AppDelegate.m' file. You will find the code for webViewDidStartLoad and webViewDidStartLoad methods.
To fade the web view, add:
- (void)webViewDidStartLoad:(UIWebView *)theWebView
{
self.webView.alpha = 0.0f;
[super webViewDidStartLoad:theWebView]; // add this line to your code
}
Then to lighten up, add at the end of the method an animation:
- (void)webViewDidStartLoad:(UIWebView *)theWebView
{
...
[super webViewDidFinishLoad:theWebView];
...
[UIView beginAnimations:#"fade" context:nil]; // add these 3 lines to your code
self.webView.alpha = 1.0f;
[UIView commitAnimations];
}
The '1.0' parameter is in seconds. You can shorten it to 0.5f, or even less.
And you may use a black background.
This fixed the problem in Android for jQm 1.4.2 along with the rest of these answers, going to be testing on iPhone tonight...
<meta name="viewport" content="width=device-width, user-scalable=no">
jQuery mobile: can I do header/footer really css fixed (like css position:fixed)?
To fix header and footer i tried to use jquery-mobile's data-position="fixed"
But it looks like ugly on the phone: when I scroll, it appears, disappears and blinks, hm.. that is not what fixed mean to be in css if set header style to: style="position:fixed;z-index:1000" it looks much better - it just fixed and that is all
Is there a way to do it out of the box?
All your questions why this happens and how to fix it: http://jquerymobile.com/test/docs/toolbars/bars-fixed.html
For archiving:
Known limitations
jQuery Mobile uses dynamically re-positioned toolbars for the fixed header effect because very few mobile browsers support the position:fixed CSS property
True fixed toolbars: touchOverflowEnabled
In order to achieve true fixed toolbars, a browser needs to either support position:fixed or overflow:auto. Fortunately, this support is coming to mobile platforms so we can achieve this with web standards. In jQuery Mobile, we have added a global feature called touchOverflowEnabled that leverages the overflow:auto CSS property on supported platforms like iOS5. When enabled, the framework wraps each page in a container with it's own internal scrolling