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.

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

Rails Long Term Support

Rails LTS provides security patches for old versions of Ruby on Rails (2.3, 3.2, 4.2 and 5.2)

• Prevents you from data breaches and liability risks
• Upgrade at your own pace
• Works with modern Rubies

Read more Show archive.org snapshot

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