css fixed div moves on first tap on ipad

I have the following CSS rule for div element in my webpage

#menudiv {
    position: fixed;
    height: 100%;
    margin-left: 5px;
    width: 150px;
    background: transparent;
    z-index:3;
    min-height: 680px;
}

This is a menu on the left on my page, and it's fixed positioned. It works well on normal PC displays, while on iPad there is an issue.

When I load the page and I touch the screen with the finger scrolling down, the #menudiv moves together the rest of the page. When I release the finger, the #menudiv returns to its fixed position and then I can scroll up and down the page and it's no longer moves. What am I doing wrong here?


Try to use left property. Also if possible then use top, right, bottom also(as its fixed div)

#menudiv {
    position: fixed;
    height: 100%;
    left: 5px;
    width: 150px;
    background: transparent;
    border: 1px solid transparent;
    z-index:3;
    min-height: 680px;
}
链接地址: http://www.djcxy.com/p/95634.html

上一篇: CSS

下一篇: 首先在ipad上轻敲CSS固定div