animation: swing broken in Chrome release - how to fix? (Version 72.0.3626.96) 2019

Starr Duskk
Starr Duskk used Ask the Experts™
I have a children's website, where i have a boat rocking back and forth.

This latest update to chrome Version 72.0.3626.96 broke it so the entire screen rocks back and forth.

.swing {
    animation: swing ease-in-out 1s infinite alternate;
    float: left;
    transform-origin: bottom; /* have boat rock instead of swing */

Open in new window

Firefox works fine, but Chrome will give you seizures.

Any suggestions?

Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Most Valuable Expert 2017
Distinguished Expert 2018

I just checked my Chrome

Google Chrome is up to date
Version 72.0.3626.96 (Official Build) (64-bit)

Open in new window

I can't replicate - works fine for me.

Maybe you are running a cached version

Try adding ?ver=fixme to the url 

Open in new window

I'm going to take a guess here, that Starr Dusk - you're viewing on a maximized 1920x1080 monitor, and Julian is not.

The boat itself is the only thing rocking, but on a maximized Chrome window, with the bookmark bar on, the boat keeps dipping JUST underneath the bottom of the screen as it rocks, popping a scrollbar on the right of the screen, and then jumping the entire area horizontally by just a touch.

You need to play with the overflow on the body.
"overflow: scroll" will make the scrollbar there regardless of height, and will just enable it when needed.
Starr DuskkASP.NET VB.NET Developer


Thanks so much!

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial