How to create a div always floating on top For Ipad without issues?

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

While touch dragging on page the position fixed div sometimes able to drag down .

While zoom in/out the div position went crazy for a second.

The div is blinking and shaking horribly when page is scrolling down fast

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:

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.

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.

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.

---

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

链接地址: http://www.djcxy.com/p/17124.html

上一篇: 在启用了VoiceOver的情况下，在iPad上滚动溢出的内容

下一篇: 如何创建一个始终浮在顶部的div对于没有问题的Ipad？