框影被jQuery Mobile CSS切断

Question

打开下方的移动侧面板时，有没有办法防止.snap-drawer上.ui-content上的方框阴影被$(document).on('pagecontainershow', function () { var snapper = new Snap({ element: $('#content')[0] }); $('#open-panel').click(function () { snapper.open('left'); }); });切断？

期望的结果：

.ui-content, a, .snap-drawer {
    color: black;
}
.snap-content {
    background: grey;
}
.snap-drawers, .snap-drawer {
    background: green;
    /* WTF */
    box-shadow: 10px 10px 5px 0px rgba(0, 0, 0, 0.75);
}
#content {
    background: #BFC7D8;
    z-index: 1;
}
.snapjs-right .snap-drawer-left {
    display: block;
    right: 0;
    left: auto;
}

<link href="https://rawgithub.com/kennethkalmer/snapjs/v2.0/dist/2.0.0-rc1/snap.css" rel="stylesheet"/>
<link href="http://code.jquery.com/mobile/1.4.2/jquery.mobile.structure-1.4.2.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
<script src="https://rawgit.com/kennethkalmer/snapjs/v2.0/dist/2.0.0-rc1/snap.js"></script>

<div class="snap-drawers">
    <div class="snap-drawer snap-drawer-left">
        <ul>
            <li>Pretty row 1</li>
            <li>Pretty row 2</li>
            <li>Pretty row 3</li>
        </ul>
    </div>
</div>
<div data-role="page" id="content">
    <header data-role="header" data-position="fixed" data-tap-toggle="false">
        <a id="open-panel">Open panel</a>
    </header>
</div>

{{1}}