Posted over 4 years ago. Visible to the public. Linked content.

Fixing jerky CSS3 animations

When a CSS3 animation makes the animated element flicker, it may well be due to pixel fragments being handled differently during animation. You can force the browser into rendering the element on the GPU by adding certain properties. In Chrome, the combination of the following properties has the best effect.

Copy
box-shadow: 0 0 0 #000 transform: translate3d(0,0,0) # remember to add vendor prefixes

Depending on your markup, you might need to set these properties on several elements (presumably all those that have height or width in %).

For background and further information, see the linked StackOverflow answer.

Caveats

  • An accelerated container might reduce the quality of your image rendering
  • Chrome has a blacklist of graphics cards for which it disables acceleration by default. You can override this in your Chrome settings (about:something).

Does your version of Ruby on Rails still receive security updates?
Rails LTS provides security patches for old versions of Ruby on Rails (3.2 and 2.3).

Owner of this card:

Avatar
Dominik Schöler
Last edit:
over 4 years ago
by Dominik Schöler
About this deck:
We are makandra and do test-driven, agile Ruby on Rails software development.
License for source code
Posted by Dominik Schöler to makandra dev
This website uses cookies to improve usability and analyze traffic.
Accept or learn more