jquery mobile page flicker

半腔热情 提交于 2019-12-03 17:35:34

If anyone is having the same issue as above where page flickers during transition when:

page content height > screen height

This is somehow related to the header/footer provided by JQM. To fix this:

1) Remove all data-position="fixed" from the headers/footers.

2) Include the following CSS to provide the same effect (but without flickering)

.ui-page {
    -webkit-backface-visibility: hidden;
    overflow: hidden;
}
.ui-header {
    position:fixed;
    z-index:10;
    top:0;
    width:100%;
    height: 40px;
}
.ui-content {
    padding-top: 57px;
    padding-bottom: 54px;
    overflow: auto;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}
.ui-footer {
    position:fixed;
    z-index:10;
   bottom:0;
   width:100%;
}
Michael Jiang

Remove data-position="fixed" works, but I have to keep those attribute. Finally I fixed by change viewport meta tag:

<meta name="viewport" content="width=device-width, user-scalable=no" />

Here is the link I find the answer: Flickering when navigating between pages

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!