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 keep floated element from affecting “text-align: center” text?

    How to save(download) HTML page with all images, css etc in Android?

    How put some horizontal offset to an element bottom border with CSS?

    How can I use CSS to add a blank column between paired column groupings?

    How to have two css animations in one tag

    How to replicate PS multiply layer mode

    How to make tabs with pure HTML/CSS

    How to indent items of a sublist using css and html in wordpress

    Show hidden image with jQuery

    How to change the position of Dynamic View's Search bar to the left (CSS CODE)

    How to underline list items separately with CSS?

    How to style in IE6 CSS?

    How to align form using css [closed]

    jQuery - failed show/hide buttons

    Show Button in Table Cell Hover Over/Mouse Over

    How to add incremental values to a css attribute with Jquery

    Couldn't understand CSS selectors meaning in the juizy slideshow stylesheet code

    How to change the mouse cursor over an embedded flash?

    Using jQuery to show/hide list items

    How to have different size images fluidly respond CSS?

    How to assign CSS properties to aside tag

    How do I make an `hr` with repeating small images?

    How to move items left and right in an html table using css? -

    How do I create a clickable button or link inside an tag and still be right-clickable?

    How To Create A Responsive Horizontal Layout Using CSS?

    How to make round circle links responsive in css?

    How to properly apply WinJS.Binding.Template ListView GridLayout CSS?

    How to override css for giving background image?

    How to set the CSS styles of the image to fit bootstrap width

    How to change CSS to the same class but another input name