I'm building a mobile app using jQuery Mobile 1.3.0, EaselJs 0.6.0 and TweenJs 0.4.0.
So, when I load the page, some content gets visually duplicated. The DIVs are not really duplicated, it is just visual.
This bug only appears on Safari (Windows + OSX).
If I click and slide to select the page, the bug disappears.
If I switch page (with jQuery Mobile slide transition), it also disappears.
Here is a screenshot:
My code is massive so I cannot really post it fully here. I've just spent 2 hours playing around with my code to try to fix this. I really have no clue.
If you have an idea and need more information, then please let me know.
Not a pretty answer, but a workaround that worked for quite a few:
This sounds like a possible racing-condition, you can try setting a timeout(couple MS) when the page is loaded and then have it re-renderd after that timeout through switching display: none/block on the body.
Related
You can see my app at kogarah.herokuapp.com
I'm having a problem getting this to look ok in IE8 and I need to make it work with this version of the browser. I suspect it's something to do with container width.
The li in the navbar are all showing underneath each other rather than in a straight horizontal line, and there are similar issues with the main parts of the pages too, where I use bootstrap's grid system.
I have read the bootstrap documentation about IE8 compatibility but have still not been able to solve this.
If anyone can help I'd be very grateful.
Thanks
I am using jQuery mobile 1.1.0 and I am facing a problem that when I run the application in the browser it works fine but when I run this through 'Home screen icon' it starts flickering the pages.
I am using iphone 5.1.
Does anybody have a solution for this issue?
You need to update to jQM 1.1.1, screen flickering issues have been fixed in this version. This problem affected running jQM in UIWebView container like PhoneGap, but I assume it's similar when you save it on the home screen.
Try updating and see if it'll fix your problem.
Announcing jQuery Mobile 1.1.1
It's because of the page transitions. If you disable them globally for the time being, you'll fix your problem. It sucks to lose the transitions, but the white "flash" is far worse.
Here's the docs on disabling page transitions: http://jquerymobile.com/test/docs/api/globalconfig.html
I am building a cross-platform app using jQueryMobile and Phonegap. Currently using jQM 1.1.0 and Phonegap 1.6.1.
The page transition function sometimes just seems to break down when the user clicks a button or list item that links to another page in the app.
<a href="#page2">
This kind of link is what the whole app is made of. But depending on god knows what, sometimes when you click a link the app stalls. External links will still be followed, and buttons that don't trigger any page changing work fine. But anything with href and $.mobile.changePage seems to be broken.
This problem occurs in iPad Simulator and iPhone Simulator, not in Chrome. It seems to have something to do with the type of page transition specified (i.e. fade or slide or flip etc). Some transitions seem to cause problems, sometimes it seems to be the lack of a specified transition that is the cause, and sometimes neither of those explanations have any traction.
Before I add a whole bunch of code, I'm interested if anyone has similar experiences.
I am just finishing off a mobile web application for a client. I have written it using MVC3 and Razor and using jQuery Mobile. Something I hadn't noticed but the client has is that Safari (and only Safari) seems to be able to move around the screen when using the web application. Difficult to explain here but you can slide the whole browser to the left, right, up and down leaving a Grey background behind it, this is not something that other mobile sites do. Does anyone have an idea of what this might be? I don't even know where to start with it! Thanks in advance to all who contribute.
I suppose it has to do with the issue described in this question: jQuery - draggable images on iPad / iPhone - how to integrate event.preventDefault();?
Ok for anyone who comes across this I have found the solution. The css that comes with the jquery mobile framework contains the class ui-body-c (with the c being replaced by other letters dependiong on theme). In this class there is a border: 1px solid #ccc;, removing this has removed the issue without changing any styling on the site.
Just installed sIFR into the site I am building (a personal portfolio site). When using it on pages with slimbox popups, sIFR overlaps the slimbox and makes it dificult to see the image. I tried applying a high z-index to the items I didn't want overlapped, but that didn't solve anything. Here is a screenshot of what it looks like (since my site is not online yet):
http://users.sephiroth.ws/DemonicGoblin/sifr.png
Is there a way to hide the sIFR when a slimbox link is clicked, or a way to adjust the z-index for a way to it not to be always on top? This happens on the latest version of all major browsers (I couldn't test Safari or Chrome though, even though I doubt it will differ)
I ahvent been able to find any information regarding this subject, so if it has been fixed in the sIFR beta it would be nice to know. Thanks.
In sIFR 2 you need to set the sWmode parameter to "opaque". This should allow HTML elements to be displayed on top of the Flash movie.
In sIFR 3, the parameter is wmode, though you can also use opaque: true.
Thank you so much - just saved my day.
I saw that lightbox break - so did I nearly:)!!!
But what a straight forward answer and solution thanks!! again
The file in mention is:
sifr.js
and put a code like:
sIFR.replaceElement(named({sSelector:"h1", sFlashSrc: "http://localhost/ddddddd/templates/template/i_font_swf/carbon_std_swf.swf", sCase: "upper", sColor: "#86ca29", sWmode:"opaque", sBgColor:"#fff"}));
I just write it cause took me some time to remember where this setting initially was - when I did the sIFR long ago.