Removing page affects header

[mdgross]

It seems that calling $.mobile.firstPage.remove() is removing .ui-page-header-fixed and padding-top from the active page. This was working all the way up to 1.4.3. The problem started occurring in 1.4.4 and 1.4.5.

1. Click "Show Page B"
2. Click "Remove First Page"
3. Unexpected Behavior: Header moves

1.4.5 - Broken
http://jsbin.com/docona/1/

1.4.3 - Working
http://jsbin.com/docona/2/

[arschmitz]

@mdgross thank you for reporting this. removing the first page is not supported this will defiantly break navigation. Closing as not a bug.

[arschmitz]

@mdgross i was really jus commenting on what you said because your fiddle does not work because the resources are blocked from loading so i cant view your example please use are jsbin template at http://jsbin.com/ofuhaw/1/edit but either way what your doing is 100% not supported.

Mixed Content: The page at 'https://fiddle.jshell.net/mdgross/ukztv31w/3/show/' was loaded over HTTPS, but requested an insecure stylesheet 'http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css'. This request has been blocked; the content must be served over HTTPS.
fiddle.jshell.net/:1
Mixed Content: The page at 'https://fiddle.jshell.net/mdgross/ukztv31w/3/show/' was loaded over HTTPS, but requested an insecure script 'http://code.jquery.com/jquery-1.11.1.min.js'. This request has been blocked; the content must be served over HTTPS.
fiddle.jshell.net/:1
Mixed Content: The page at 'https://fiddle.jshell.net/mdgross/ukztv31w/3/show/' was loaded over HTTPS, but requested an insecure script 'http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js'. This request has been blocked; the content must be served over HTTPS.
fiddle.jshell.net/:34
Uncaught ReferenceError: $ is not defined

[jaspermdegroot]

@mdgross

First of all, jQuery Mobile is a team/contributors effort. Even if this was an actual regression, it has nothing to do with who is project lead.

When you inspect your test page you'll see that the padding-top is removed from the page when you remove the first page. Probably because we had to make a change between 1.4.3 and 1.4.5 to fix an issue with page padding or fixed headers. Like @arschmitz said removing the first page is currently not supported. If you want to do it anyway you have to understand that your code might break, even in a maintenance release. We don't test it.
You might be able to work around the problem by calling updatePagePadding() on the active page after you removed the first page.

[solymosi]

I just bumped into the same issue and did a little debugging. It seems like that commit 3efe6fe caused the issue. The problem is with the _destroy function, which operates on the currently active page instead of the page that the toolbar (which is being destroyed as a consequence of calling remove on $.mobile.firstPage) is actually on. When the first page is being removed, another page is already marked as active.

Simply assigning this.page to the page variable instead of fetching the active page from the page container seems to solve the problem.

I'm running tests at the moment, will submit a pull request soon.

[wakiki]

@solymosi looks like your PR was merged but it won't be released until v1.5.

Is there a fix that we can use for the time being?

For now I'm using fix from @mdgross but this doesn't work:

$(document).on 'pagecontainerchange.fixcache', $.mobile.pageContainer, (event, ui) ->
  if $.mobile.firstPage.is('[data-dom-cache="true"]') or $.mobile.page::options.domCache and $.mobile.firstPage.is(':not([data-dom-cache="false"])')
    $(document).off 'pagecontainerchange.fixcache'
  else if ui.prevPage != undefined
    if !($(ui.toPage).is('[data-role="dialog"]') or $(ui.prevPage).is('[data-role="dialog"]'))
      if ui.toPage.attr('data-url') != ui.prevPage.attr('data-url')
        $.mobile.firstPage.remove()
        $(document).off 'pagecontainerchange.fixcache'
  return

[thenewguy]

@wakiki I posted an alternate workaround that may be of interest #3249 (comment)