How can I turn off hardware acceleration for certain HTML elements via CSS?

Question

I created a very complex web app using HTML5, CSS3 and jQueryMobile.

It seems like jQueryMobile turns on hardware acceleration here and there via translate3D and/or translateZ .

Now I want to turn this off for certain HTML elements.

This gives me two questions:

• Is there a css property/attribute or something that I can use to tell the browser to turn off hardware acceleration for certain elements?
• If not: I will have to find the places where either translate3D or translateZ is used and simply remove them, right? How can I do that? The whole markup is very complex with many HTML elements. I can't go through each element in the inspector and search for it.

---

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). 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).

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. This way I noticed that THE WHOLE app gets hardware-accelerated, not only the necessary parts.

IMHO this is not a good thing because:

• Accelerating the whole thing will cause heavy load to the GPU which makes the whole app stutter while scrolling.
• AFAIK it's best practice to let the CPU do the static stuff while the GPU only handles all the fancy animated stuff.
• When animations have ended, hardware acceleration should be deactived because it's not necessary anymore and would shorten battery lifetime.

Answer 1

After going through thousands of thousands of lines of CSS code, I found this:

.ui-page{-webkit-backface-visibility: hidden !important}

This was active for all pages and caused the problem. Removing that line fixed it for me.