IOS html css Z-Index и абсолютная позиция не работают для перекрывающихся DIV

Мне нужен "слайдер" div, чтобы перейти поверх всего остального, но z-индекс и позиция: относительная или абсолютная или фиксированная работа. Я уверен, что я сделал что-то неправильно, потому что он отлично работает в моем маленьком демо-приложении, которое я сделал. Кажется, работает отлично в Icenium, но не в реальном ipad

 <div id="tabstrip-home" data-role="view"  data-title="Home"   style="z-index:1; position:relative">
    <div id="slider" class="slide" data-show="showDrawer" style="height:1000px; align:right; border:solid 1px black; background-color:red">

                    <div id="my-drawer" style="width: 270px; border:2px; background-color:red; ">
                        <div data-role="navbar">
                            Menu
                        </div>
                        <ul data-role="listview" data-type="group" style="position:relative; background-color:red">
                            <li >
                                <ul>
                                    <li>
                                        <a>Customers</a>
                                    </li>
                                    <li>
                                        <a>Products</a>
                                    </li>
                                    <li>
                                        <a>New Order</a>
                                    </li>
                                    <li>
                                        <a>Manage Orders</a>
                                    </li>
                                    <li>
                                        <a>Synchronization</a>
                                    </li>
                                    <li>
                                        <a>Settings</a>
                                    </li>
                                </ul>
                            </li>
                        </ul>
                    </div>
                </div>

<a id="drawerButtonId" data-role="button" class="drawerBtn" data-align="right" style="position:relative;">Drawer</a>
</div>

CSS:

<style>
            .slide
            {
                direction: right;
                position: fixed; 
                z-index: 903; 
                background: red;
                display: none;
                /*                -webkit-transition: width 1s ease;*/
                overflow: hidden;
            }

            .drawerBtn
            {
                cursor: pointer;
            }
        </style>