Why do these two animation tags break the page on mobile?

Melody Scott
Melody Scott used Ask the Experts™
on
If you take this page: https://www.magickitchen.com/test-bounce.html and test it on Google's mobile tester: https://search.google.com/test/mobile-friendly?url=https%3A%2F%2Fwww.magickitchen.com%2Ftest-bounce.html  You will see that the page isn't mobile friendly.

With the help of some experts here, I was able to narrow that down. By removing the classes  animated bounceInDown  from the orange circles under How it Works, the page becomes mobile friendly again.

Is it possibly just this css on bounceInDown? transform: translateX(400px);

I hope that is enough information, thanks.
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Hi,

The tools is not for mobile visualization, it just a screen capture of the rendered page.

I have tested  the url with my cell phone and the bounced is ok, I would not change the code as it is working fine using Chrome

What you have to fix is (from tool result):
-Clickable elements too close together
-Text too small to read

If you want to preview the website in mobile view you can resize the browser windows or use real mobile device and tests different browser.
For more complete testing you can use https://www.browserstack.com 
or https://saucelabs.com/ 
I do prefer browserstack for mobile testing.

You can also check this website for browser compatibility https://caniuse.com/
https://caniuse.com/#search=animation or any element / function you want to check

https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/translateX

For CSS animation I usually use https://daneden.github.io/animate.css/

Author

Commented:
Hi. If the classes animated bounceInDown  are in that section, then I get the  -Clickable elements too close together
-Text too small to read. If I take them out, the page is fine.

What I didn't say is I went through all this in another question on here. Those two classes are the problem. They break the page on certain phones. (Pixel 2 was mentioned). Please see my former question here:  https://www.experts-exchange.com/questions/29156709/Why-Does-Google-Mobile-Test-show-this-screenshot-and-I-can't-replicate-the-Issue-in-Chrome.html
What they mean by that is that the links are too close so put some spacing / padding between item using a span or display differently, use bigger font size

Browse our two menus: A LA CARTE (some space here) and COMPLETE MEALS . We cover a great variety of diets.

Browse our two menus: 
- A LA CARTE
- COMPLETE MEALS

We cover a great variety of diets.

Open in new window

Ensure you’re charging the right price for your IT

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!

Author

Commented:
No, I'm sorry, you are not understanding. I have fixed the problem.  https://www.magickitchen.com  tests ok.

And all I did was take out those classes. In the last question, an expert gave me the clue by saying that on his pixel 2, it was not right down to the "what's popular", so I took out elements until the page tested right. And that's what the problem was. It's the classes animated and bounceInDown .

If the tag looks like <div class="col-xs-12 col-sm-4 animated bounceInDown go" data-id="1">, then Google gives me those errors. If I change the three divs around those circles to <div class="col-xs-12 col-sm-4" data-id="1"> ,  <div class="col-xs-12 col-sm-4" data-id="3">,  <div class="col-xs-12 col-sm-4" data-id="5">then the page is fine.

Compare the two pages on the mobile test: https://www.magickitchen.com/test-bounce.html  and https://www.magickitchen.com.
What you can do is to use JS
https://animejs.com/
or
https://wowjs.uk/

or CSS
https://daneden.github.io/animate.css/

as they have fallback that may fix the problem

Author

Commented:
ok, thanks.

Author

Commented:
thanks, will try that!

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