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

    CSS: how to create a fixed top header with a fixed width

    How to make angular material dialog box work in IE10

    How to apply multiple css transform properties using Jquery

    How do I style a different border?

    How to use :hover css when mouse is down

    How do I change the admin header color in Magento?

    How do I make sure my text stays on same line when I add a 'space' inside
  • element?
  • CSS Flexbox: how to change the width of the element

    How can I remove the generic HTML/CSS tooltip? [duplicate]

    How to center text from following element under an image

    How do I vertically and horizontally center all these elements?

    CSS - How to crop an image to a square, if it's already square then resize it

    How to apply first-child:first-letter to only one section?

    How to figure out which lines of css is not actually affecting anything again?

    How to enable links if a parent element uses a fullscreen pseudo-element?

    How to shift element upwards to it's variable height using css

    How to scale and center text vertically in a fluid layout? (using CSS)

    How to get ratio of scale image, when it's autoscaled by background-cover?

    CSS How to make image fluid extending only to one side of browser, aligned with centered content?

    How to solve css double hover issue? Making an image map

    How to override Zurb Foundation css properties using rails 3.1?

    Loop in Sass @for how to use $#{value}#{$i} correctly?

    How to horizontally center align this absolutely positioned `` tag inside the relatively positioned div?

    How to make a fixed position centered after zooming the whole website out?

    How to keep symmetry with CSS fluid spacing of dynamic content

    How to disable Bootstrap 3 collapse nav menu css

    How to add styling (CSS) to tags in Javascript/Jquery

    How to create a button with a CSS-animated background?

    How to position the whole site? css positioning problem [closed]

    How do I code a BTN in an HTML project to open a users email client