Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p><em>Source: <a href="https://github.com/jquery/jquery-mobile/issues/4024#issuecomment-5124172" rel="nofollow">https://github.com/jquery/jquery-mobile/issues/4024#issuecomment-5124172</a></em></p> <blockquote> <p>Instead of data-position:fixed to the header / footer - I applied the following CSS styles to the header, content and footer:</p> </blockquote> <pre><code>.header { position : fixed; z-index : 10; top : 0; width : 100% } .content { padding : 45px 15px } .footer { position : fixed; z-index : 10; bottom : 0; width : 100% } </code></pre> <p>Several people on the forum at the above link have stated that this has helped with flashes when transition between pages with <code>data-position:fixed</code> header/footer.</p> <p>Another suggestion from Tod Parker (a jQuery Mobile creator) was this:</p> <pre><code>.ui-mobile-viewport-transitioning .ui-header-fixed, .ui-mobile-viewport-transitioning .ui-footer-fixed { visibility: hidden; } </code></pre> <p>Which hides the fixed header/footer while transitioning from one page to another.</p> <p><em>Source: <a href="https://github.com/jquery/jquery-mobile/issues/4024#issuecomment-5250856" rel="nofollow">https://github.com/jquery/jquery-mobile/issues/4024#issuecomment-5250856</a></em></p> <p>There was also a commit made by another jQuery Mobile team member that should show-up in the next release. Here is the post: <a href="https://github.com/jquery/jquery-mobile/issues/4024#issuecomment-5250856" rel="nofollow">https://github.com/jquery/jquery-mobile/issues/4024#issuecomment-5250856</a> (the code is a bit complex to post here)</p> <p>Very recently the issue was closed due to this commit: <a href="https://github.com/Diveboard/jquery-mobile/commit/ff125b65e682ecd33888a6db1221ac441d258994" rel="nofollow">https://github.com/Diveboard/jquery-mobile/commit/ff125b65e682ecd33888a6db1221ac441d258994</a>. This fix was to set the <code>z-index</code> of the incoming page to <code>-10</code> before scrolling and then resetting the <code>z-index</code> afterwards.</p> <p>I haven't attempted any of these fixes myself but they seem to be promising.</p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
    3. VO
      singulars
      1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload