Hide page with visibility

[arschmitz]

This updates to use visibility to hide inactive pages. This has several advantages

• Changing visibility does not effect layout
• now visual updates after transition include full page reflows with animation
• no more page show event handlers
• unlike opacity visibility removes things from tab order
• unlike opacity does not create a new stacking context when hidden ( minor perf benefit ).

[jaspermdegroot]

This looks good to me and the test failure has nothing to do with this change ...
👍

Update: I found an issue (will describe in new comment) so we can't merge yet

[jaspermdegroot]

@arschmitz

This comment should be updated: https://github.com/jquery/jquery-mobile/blob/page-hide/js/transitions/transition.js#L118 (display block --> visibility: visible)

[jaspermdegroot]

@arschmitz

When we hide the page with visibility: hidden; but an element on that page has visibilty: visible;, that element will be visible.

If you look at our transitions demo (http://view.jquerymobile.com/page-hide/demos/transitions/) on a wide screen you can see the problem that this can cause. We make the menu panel visible on wide screens with visibilty: visible; so when you click on any of the transitions and navigate to the next page, you still see the menu panel that's on the hidden page.

So we have to make sure that all content on the page becomes invisible. The only (ugly) way to do this is:

.ui-page:not(.ui-page-active) * {
    visibility: hidden !important;
}

[arschmitz]

fixed and landed in 1.5-dev