Chrome’s HTML5 hardware acceleration gotcha

Most developers by now (especially those targeting mobile browsers) agree that taking advantage of browser hardware acceleration is pretty critical. Ticks like forcing elements to be accelerated by using identity 3d transforms can greatly improve the user experience.

But sometimes it’s not just about speed. We ran into a confounding bug report where a few users were seeing big rendering errors that we couldn’t reproduce despite using the same browsers and operating system. It turned out a few users’ browsers (specifically Chrome 26) were not providing any hardware acceleration.

At first we thought this would just cause things to be slower yet still functional, but it turns out Modernizr detected this and changed its feature detection styles to match. This caused our JavaScript code to go down a slightly different path than we intended for Chrome. With hardware acceleration on, Modernizr put the following style on: csstransforms3d, with it turned off, it was: no-csstransforms3d

Since you normally expect Chrome to support this, it’s unlikely you’d think that any no-csstransform3d code would ever apply to that browser.

It’s a good idea to add this case to your browser compatibility testing regimen. In Chrome go to:

about://settings >  Show Advanced Settings > Use hardware acceleration when available

Firefox (21.0) and IE 10 also have a similar setting, but I haven’t seen any functional or Modernizr detected differences with that setting.