CODEWITHSUNDEEP
jquery-mobilecordova
nate8684
nate8684

Reputation: 539

JqueryMobile - My Page Appears Before transition

I am setting up an app with JqueryMobile. Whenever I click on my navigation the next page appears on top of the current page for a second and then disappears and then the transition starts and the next page appears. Is this a known problem that anyone else is having and if so, how can I fix it. I know there's an issue with flashing transitions but I don't think this is the same. I'm using un-altered jquerymobile docs. Below is my code:

https://gist.github.com/2401211

Upvotes: 0

Views: 1671

Answers (4)

Anibal Itriago
Anibal Itriago

Reputation: 1

I've been facing with this problem several times, and just when I was going to suicide, found that the problem was in some custom CSS classes, and I've fixed it! For example, I had in my body declaration:

body{
    margin: 0px;
}

Remove margin, and voilá! Something was fixed! In other app, I found at a custom wrapper class declaration:

.wrapper{
    <blabla>
    position:absolute;
    <blabla>
}

Of course, this "Absolute" forces the engine to render the page at the absolute position, and then, initiates the transition.

So, how to fix your issue?

I recommend that you remark all your .css file, and start testing class by class, try the transition, and when the transition fails, there you have the "disturbing" class.

Try it, and let us know if it fixes the issues to you!

Upvotes: 0

codaniel
codaniel

Reputation: 5253

Your complaint/issue is a common one. The transitions can be especially hideous on an android 2.x devices. Here is a quote form their blog

We did a ton of work leading up to 1.0 to make our transitions as smooth as possible, but there were two significant things that turned out to very difficult: the need to scroll the page between transitions and Android’s poor animation performance. Source

That being said my suggestion would be to update to the JQM version 1.1.0 final.

Use this to get started

<html> 
    <head> 
    <title>My Page</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
    <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
</head> 
<body> 

<div data-role="page">

    <div data-role="header">
        <h1>My Title</h1>
    </div><!-- /header -->

    <div data-role="content">   
        <p>Hello world</p>      
    </div><!-- /content -->

</div><!-- /page -->

</body>
</html>

Upvotes: 2

imaginethepoet
imaginethepoet

Reputation: 864

This may be an issue with using the same ID. Check to make sure your ID is different on each of your pages. That's what it sounds like to me

Upvotes: 0

Josh Davenport-Smith
Josh Davenport-Smith

Reputation: 5511

Try this fix:

.ui-page {
    -webkit-backface-visibility: hidden;
}

Upvotes: 0

Related Questions