jQuery Mobile Page Resizing is visible after load

Question

Update I've tracked the bug down to between the pageBeforeHide and pageBeforeShow events. Between these events, the class .ui-overlay-c is added and removed. Those CSS classes are shown here:

.ui-body-c,
.ui-overlay-c {
border: 1px solid       #aaa /*{c-body-border}*/;
color:                  #333 /*{c-body-color}*/;
text-shadow: 0 /*{c-body-shadow-x}*/ 1px /*{c-body-shadow-y}*/ 0 /*{c-body-shadow-radius}*/ #fff /*{c-body-shadow-color}*/;
background:             #f9f9f9 /*{c-body-background-color}*/;
background-image: -webkit-gradient(linear, left top, left bottom, from( #f9f9f9 /*{c-body-background-start}*/), to( #eee /*{c-body-background-end}*/)); /* Saf4+, Chrome */
background-image: -webkit-linear-gradient( #f9f9f9 /*{c-body-background-start}*/, #eee /*{c-body-background-end}*/); /* Chrome 10+, Saf5.1+ */
background-image:    -moz-linear-gradient( #f9f9f9 /*{c-body-background-start}*/, #eee /*{c-body-background-end}*/); /* FF3.6 */
background-image:     -ms-linear-gradient( #f9f9f9 /*{c-body-background-start}*/, #eee /*{c-body-background-end}*/); /* IE10 */
background-image:      -o-linear-gradient( #f9f9f9 /*{c-body-background-start}*/,     #eee /*{c-body-background-end}*/); /* Opera 11.10+ */
background-image:         linear-gradient( #f9f9f9 /*{c-body-background-start}*/,     #eee /*{c-body-background-end}*/);
}
.ui-overlay-c {
background-image: none;
border-width: 0;
}

/Update

I'm developing a touchscreen website and using the jQueryMobile library. The site is designed to run at 1366px x 768px but no smaller.

Most things are working across browsers but I'm running into a pesky bug that occurs during transitions. The pages are designed to be 99.55% width with a solid white 10px border on all edges. During transition, the page contracts by about 40px (only from the right side) and then when it loads the new page, that page is also contracted until expanding to fill the proper width.

I'm guessing that this is due to the nature of jQueryMobile transitions but I am having trouble stopping it from happening.

You can see this effect here at this link by clicking once then on any of the navigation items. It should contract and expand after the first click.

The way jQM works, there is a mobile viewport wrapper which uses the following css:

top: 0;
left: 0;
width: 100%;
min-height: 100%;
position: absolute;
display:none;
border: 0;

During the transition between pages, the following styles are applied along the mobile viewport wrapper:

width: 100%;
height: 100%;
overflow: hidden;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;

Within this viewport there are separate pages (.ui-page) each with the following css:

top: 0;
left: 0;
min-height: 100%;
position: absolute;
display: none; // overridden to display:block when the page is loaded
border: 0;
padding: 0;
margin: 0;

Here are my custom styles that I apply at the page level alongside .ui-page:

color: black !important;
background-image: none !important;
background-color: #ddd2cc !important;
border: 10px solid white !important;
padding: 20px !important;
width: 95.55% !important;

I have limited knowledge of the jQueryMobile CSS innards but any guidance on how to stop the page from expanding/contracting would be helpful. My gut tells me that the issue is due to my css overriding jQM css and applying the padding after the page loads leading the user to be able to see this padding addition.

Answer 1

Simplest fix ever:

$.mobile.maxTransitionWidth = 320;

jQM doesn't handle page transitions well at large viewport sizes. Turn them off and this bug goes away.