Question

I tried to use position fixed , and tested on Ipad 4 , very buggy.

1. While touch dragging on page the position fixed div sometimes able to drag down.
2. While zoom in/out the div position went crazy for a second.
3. The div is blinking and shaking horribly when page is scrolling down fast
4. Extremely bad performance on jquery scroll animation,create stuttering

My second attempt is to make the content inside a #container div and put the fixed object,actually a menu,outside the container and let the #container overflow-y:scroll and hidden the body overflow. Tested on Ipad 4, the problems are:

1. The momentum turned off. It means while Touch scroll ,the page moving stop instantly as user put his finger off, normally it should able to slide a bit after user finger off.
2. I tried to put webkit-overflow-scrolling:touch; for the #container, now on ipad it can slide normally but on macbook firefox browser, the scrolling is locked ,page can’t move at all.
3. If I put overflow-y and webkit-overflow-scrolling:touch both, the ipad won’t works , but the firefox works again.

Any advises on create a div always floating on top For Ipad without issues? I thought this should be a common problems.

Answer 1

I’ve succeeded by putting the container into -webkit-overflow-scrolling:touch mode, which you claim not to be working.

Try once more:

#container {
  overflow:scroll;
  -webkit-overflow-scrolling:touch;
  -webkit-backface-visibility:hidden;
  -webkit-transform:translateZ(0px);
}