JqueryMobile - Migration from 1.3.2 to 1.4.2 - Panel transparent on Slide

Question

i have a problem due the migration of an cordova-app (jquery + jquery mobile) from version 1.3.2 to 1.4.2.

I have provided an example here: http://wasted-dreams.de/tmp/

as you can see, the panel navigation slides in, and on slide out it stays transparent in the background for a few ms. after that it disapears correctly. the effect is also present on slideIN but its faster and mostly not visible.

the css class which is added on the animation is ".ui-panel-animate" and after animation should have ended the element gets an additional attribute "panel-closed"

so far my analysis. but i realy didn't find any css option or JS stuff of my code which can be responsible for that effect.

have anybody an idea how to get this fixed?

thanks in advance

Answer 1

It looks like you have a transparent background which allows you to see through the content to the panel underneath. You can either add a background or just change the panel-display attribute to push or overlay instead of the default reveal

<div data-role="panel" data-display="push" id="menue" data-theme="a">

Here is a DEMO

In the demo, you can remove the data-display="push" from the panel to see your issue reproduced.

API reference: http://api.jquerymobile.com/panel/#option-display

UPDATE: the ui-panel-wrapper is definitely transparent.

Add this CSS, and the problem goes away:

.ui-panel-wrapper {
    background-color: rgb(35, 71, 160) !important;
}

Updated FIDDLE