固定定位元素在页面卸载时消失 [英] Fixed positioned elements disappear on page unload

查看:165
本文介绍了固定定位元素在页面卸载时消失的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我有一个固定的顶部导航栏,当页面内容正在滚动时,它始终保持最佳状态。我注意到,在Chrome for iOS和Safari独立模式下,固定条消失在页面卸载任何其他元素之前。如何让所有的元素,无论定位,同时消失?



演示: http://kodu.ut.ee/~b04866/demo/demo.html 在Chrome for iOS中加载页面,反复点击刷新。观察固定div如何先消失,然后是剩下的内容,最后重新绘制页面。 解决方案

固定元素被提升到合成层
,并且在页面卸载时存在相应的错误。



http://newscentral.exsees.com/item/528d72c6d22fab46e4eb18e5cb8fece0-0d5a1eca143f58f995dc015e265514cb


文档卸载时的合成图层比
元素的销毁速度快得多[...]这已经被WebKit工程师证实

希望:



在iOS 8中引入了一个新的更快的Web视图组件: WKWebView
Safari使用它。使用Safari时,问题就消失了:)
我不知道Chrome是否受到iOS 8的影响。



我比较常用的 UIWebView 和新的 WKWebView 在iOS 8下。
使用 UIWebView 显示的应用程序显示html / web内容仍然受到这个问题的影响:(

I have a fixed top navigation bar that stays on top of everything while the contents of the page are being scrolled. I noticed that in Chrome for iOS and Safari standalone mode, the fixed bar disappears on page unload before any of the other elements. How to make all the elements, regardless of the positioning, to disappear at the same time?

Demo: http://kodu.ut.ee/~b04866/demo/demo.html Load the page in Chrome for iOS, repeatedly click refresh. Observe how the fixed div vanishes first, then the rest of the content, and finally the page is being redrawn.

解决方案

Fixed elements are lifted to a composited layer and there is a corresponding bug on page unload.

From http://newscentral.exsees.com/item/528d72c6d22fab46e4eb18e5cb8fece0-0d5a1eca143f58f995dc015e265514cb:

"[...] composited layers upon document unload are destroyed much faster than elements that are not [...] This has been confirmed by a WebKit engineer to be a bug."

HOPE:

With iOS 8 a new faster web view component was introduced: WKWebView. Safari use it. The problem went away when using Safari :) I don't know if Chrome is affected under iOS 8.

I compare common UIWebView and new WKWebView under iOS 8. Apps using UIWebView to display html/web content are still affected with the problem :(

这篇关于固定定位元素在页面卸载时消失的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆