46667

Display issues when we change from one jquery mobile page to another in firefox

I have a multi page template developed in jquery mobile.The problem I am facing is whenever I navigate from one page to another in Firefox(desktop.Version 12),the backgrounds of buttons,listview etc disappear at first,but their labels stay for a while.By that time the content of the second page appears.For a split second,the labels of the previous page is superimposed on the new page.Though it stays for a split second only,it looks weird since there are a number of components in the page.I know page transitions will not work with firefox and I am ok with that.But this rendering issue should not happen.

Code I am using:

<!DOCTYPE html> <html lang="en"> <head> <title>Test</title> <meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" /> <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script> <script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script> </head> <body> <div data-role="page" id="page1"> <div data-role="header"> <h1>Page1</h1> </div> <button>button</button> <button>button</button> <button>button</button> <button>button</button> <button>button</button> <div data-role="content"> <ul data-role="listview" data-inset="true"> <li> <a href="#page2">aaa</a> </li> <li> <a href="#page2">aaaaa</a> </li> <li> <a href="#page2">bbbbbbbb</a> </li> </ul> </div> </div> <div data-role="page" id="page2"> <div data-role="header" > <h1>Page 2</h1> <a href="#page1" data-back-btn="true" data-icon="back" class="ui-btn-left">Back</a> </div> <div data-role="content"> This content is for page 2.. <ul data-role="listview" data-inset="true"> <li> <a href="#page1">BBBBBBBB</a> </li> <li> <a href="#page1">WWWWWWWWWW</a> </li> <li> <a href="#page1">FFFFFFFFFFFFFFFFFF</a> </li> </ul> </div> </div> </body> </html>

A demo here - http://jsfiddle.net/5FZb7/

<strong>Note</strong>:

If I use jquery mobile 1.1 version,this issue is not happening.But in my project I have to use the legacy version 1.0.1 since we have already used it for most part of the project and dont want to upgrade to 1.1 at this moment.

Thanks in advance.

Answer1:

Do not actually know, why does it work, but specifying data-transition fixes it. The most interesting thing is that even data-transition="fade" which should be applied by default, fixes it too.

<a href="#page1" data-transition="fade">I am good for FF12</a> <a href="#page1">And I am bad</a>

Recommend

  • Tracking screen recorder in windows app
  • javafx 3d performance large data set
  • Rails 5 - Google Maps - Javascript error - initMap is not a function - fixing one js issue creates a
  • Is there a way to set up a fallback for the formAction attribute in HTML5?
  • google maps autocomplete bounces back already cleared text …odd…odd…odd
  • Problems with toDataURL HTML5 other ways to get canvas data?
  • How to render a pixel array most efficiently to a window in c++?
  • How do I retrieve the user information of a user authenticated with Apache's mod_ldap?
  • How can I include If-None-Match header in HttpRequestMessage
  • Why isn't obj.style.left = “200px”; working in this code?
  • Tell Git to stop prompting me for conflicts when none really exist?
  • Parse a date string in a specific locale (not timezone!)
  • Problem deserializing objects from cache on MyBatis 3/Java
  • OpenGL 3.3 on Mac OSX El Capitan with LWJGL
  • Python urlparse: small issue
  • Jquery UI tool tip close icon
  • Chrome doesn't support silverlight anymore? How to solve this?
  • $wpdb not working in file of WordPress plugin
  • MongoDB in PHP using aggregate to group by _id is null not working
  • Deselecting radio buttons while keeping the View Model in synch
  • Ajax jQuery multiple calls at the same time - long wait for answer and not able to cancel
  • Different response to non-authenticated users and AJAX calls
  • JSON with duplicate key names losing information when parsed
  • Arrow is showed instead of the material design version hamburger icon. Why doesn't syncState in
  • To display the title for the current loaction in map in iphone
  • Do I've to free mysql result after storing it?
  • Jquery - Jquery Wysiwyg return html as a string
  • Python - Map / Reduce - How do I read JSON specific field in using DISCO count words example
  • Hibernate gives error error as “Access to DialectResolutionInfo cannot be null when 'hibernate.
  • Data Validation Drop Down Box Arrow Disappearing
  • How to get icons for entities from eclipse?
  • trying to dynamically update Highchart column chart but series undefined
  • Proper way to use connect-multiparty with express.js?
  • Load html files in TinyMce
  • coudnt use logback because of log4j
  • JaxB to read class hierarchy
  • Observable and ngFor in Angular 2
  • How to Embed XSL into XML
  • UserPrincipal.Current returns apppool on IIS
  • Conditional In-Line CSS for IE and Others?