[英]How can I turn off hardware acceleration for certain HTML elements via CSS?
I created a very complex web app using HTML5, CSS3 and jQueryMobile. 我使用HTML5,CSS3和jQueryMobile创建了一个非常复杂的Web应用程序。
It seems like jQueryMobile turns on hardware acceleration here and there via translate3D
and/or translateZ
. 似乎jQueryMobile通过
translate3D
和/或translateZ
在此处和那里打开硬件加速。
Now I want to turn this off for certain HTML elements. 现在,我想为某些HTML元素关闭此功能。
This gives me two questions: 这给了我两个问题:
translate3D
or translateZ
is used and simply remove them, right? translate3D
或translateZ
的位置,然后将其删除,对吗? How can I do that? Update: The reason why I want to fix this 更新: 我要解决此问题的原因
In my web app there are some elements which need to be swipeable (eg an image gallery). 在我的Web应用程序中,有些元素需要可滑动(例如,图片库)。 In this case I need hardware acceleration.
在这种情况下,我需要硬件加速。 Same for div containers that require iScroll and every other element which should be animated (eg slide- and fade-animations).
对于需要iScroll和所有其他应设置动画元素(例如,幻灯片动画和淡入淡出的动画)的div容器也是如此。
However, there are many parts of the app which are static (not animated). 但是,应用程序的许多部分都是静态的(非动画)。 Using a special startup option in Safari, I was able to make the parts which get hardware-accelerated visible.
使用Safari中的特殊启动选项,我可以使硬件加速的零件可见。 This way I noticed that THE WHOLE app gets hardware-accelerated, not only the necessary parts.
这样,我注意到,整个应用程序不仅在硬件上得到了加速,而且在硬件上也得到了加速。
IMHO this is not a good thing because: 恕我直言,这不是一件好事,因为:
After going through thousands of thousands of lines of CSS code, I found this: 在浏览了成千上万行CSS代码之后,我发现了这一点:
.ui-page{-webkit-backface-visibility: hidden !important}
This was active for all pages and caused the problem. 这对所有页面均有效,并导致了问题。 Removing that line fixed it for me.
删除那条线对我来说很固定。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.