Search code examples
cssipadpositionfixed

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?

Solution

  • 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;
}