Jittery animations in Chrome

  • Resolved lanfeustgva

    (@lanfeustgva)


    2 years ago

    Hi everyone,

    I looked around the forum but can’t find a solution to my problem. I have several issues with my website, when it’s browsed through Chrome:

    • Animations are not rendered correctly on mobile. The blocks are not moving smoothly and “jump”. It works great on both an iPad and a computer (Chrome & Safari)
    • When I share the link of my site to friends (on WhatsApp for instance), it opens it automatically with Safari for iPhone users, even those who have Chrome as a default. Android users get an error message. They have to manually copy the link to their browser to open.

    Any way to fix this?

    Many thanks,

    Hadrien

    The page I need help with: [log in to see the link]

Viewing 4 replies - 1 through 4 (of 4 total)
  • Moderator bcworkz

    (@bcworkz)

    Position translation animation takes a lot of processing power. Phone processors are not as robust as those on larger devices. Mainly because they have significant power consumption constraints. To eliminate jitter, greatly simplify the animation. For example, remove the position translation and simply fade in, or remove animation entirely on mobiles. You could have separate CSS files for mobiles or for desk/laptops and conditionally enqueue one or the other.

    I cannot speak to the issue with shared links, the behavior is external to WP.

    Thread Starter lanfeustgva

    (@lanfeustgva)

    Thanks. I should have added that it works great when using Safari on mobile. Problem seems to be limited to Chrome + mobile.

    I will try to simplify the animations as suggested. Hopefully it solves the problem.

    Any tips for creating a separate css? I don’t really know how to do this.

    Thanks for your help, appreciated.

    Hadrien

    Moderator bcworkz

    (@bcworkz)

    External CSS files can be enqueued from theme or plugin code. You could conditionally enqueue one file or another based on the return from wp_is_mobile().

    If you prefer inline styles over external files, there is a function to add inline styles, but it requires being related to an enqueued external file. IMO the requirement sort of defeats the purpose. While it’s a little hacky, we can directly output <style> blocks using the “wp_print_styles” action. You can see the in the link’s More Information section that we are not supposed to do this. This is because it can mess up how WP manages dependencies and loading order.

    Thread Starter lanfeustgva

    (@lanfeustgva)

    Thanks for the info I’ll give it a try.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Jittery animations in Chrome’ is closed to new replies.