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

Tags: iphone,html5,css3,jquery-mobile,hardware-acceleration

Problem :

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 (e.g. 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 (e.g. 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.

Solution :

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.

    CSS Howto..

    How to modify CSS rules without adding style attribute?

    how to display div one by one using css

    How to find elements and siblings within a tree

    How do I create a cut-out hexagon shape?

    How do I draw a Diagonal div?

    bootstrap modal disappear immediately after showing

    How to make scrollable table's header fixed using css fixed position property?

    How to make a hidden face appear from the top using -webkit-transform: rotateX();

    How to display a box of color beside a table row using CSS?

    How to do a webkit css endless rotation-animation.

    How to define cellspacing in CSS

    How to hide div on swipe in Angular

    how to add border to CSS only speech bubble

    how to display euro symbol in css after and before pseudoelements

    How to mimic in CSS
    HTML <table border="2" cellpadding="5" cellspacing="0" width="40%"> <tr><td> aaa </td><td> bbb </td></tr> <tr><td> ccc </td><td> ddd </td></tr> </table> <br/> <table class="mytable"> <tr><td> aaa...
    Read more

    How can I force browsers to print background images in CSS?

    CSS/HTML problem in IE - how to fix?

    How to correctly add nested divs

    How to remove/add jQueryUI CSS theme from specific element?

    How to override inline CSS (specifically a div with certain class) with external CSS?

    Button transition using javascript and css, how to temporarily disable the transition

    How to addClass() at RANDOM to an element in jQuery?

    How to float menu list elements

    Show bootstrap glyphicon in link when hovering

    How to make this menu occupy all the remaining space's width?

    How should I modify this code so it works with severel id's?

    How to add a sub menu in css template for blog? [closed]

    how to fix the difference in line thickness for a collapsable element

    How can I make each section fit within the li box?

    How to place content below a fixed image?