Really choppy animations in Chrome iOS

[terryupton]

Has anyone else noticed really choppy animations in Chrome on IOS?
Seems fine in Safari on IOS and Chrome Desktop.

Any ideas as to what might be causing this?

[warengonzaga]

Can you provide a video or gif of being choppy of animations? What I think is, it cause by this issue #928

[toviszsolt]

Tested on 300+ ipad 4, air, air 2, pro. :) Really. IOS 10/11/12. There is no problem. Chrome not tested, just Safari and Standalone Web Application. Look like the problem is in your device/settings/webapp.
If you want to use large and/or complex animations you need to understand the "new" Webkit render engine... Google is your friend...

[terryupton]

@sivot - yes there is no issue on any Safari, it is Chrome that is the problem as stated in the title.
As for complex animations - not really!? All I am doing is using the simple fadeInDown with a delay for each child item, so I wouldn't really call this a complex/large scale animation.

I believe this is either a bug (or an adjustment of code required) as per the related thread #928 that @warengonzaga mentioned. Or it is a Chrome bug? But not able to verify this.

@warengonzaga please find videos below that show the issue.
One from Chrome (problem) and one from Safari as to how it should and does render correctly.

Chrome
https://www.dropbox.com/s/xhu43wvbamynsto/RPReplay_Final1557469240.MP4?dl=0

Safari (working)
https://www.dropbox.com/s/xg5pcbl219odman/RPReplay_Final1557469307.MP4?dl=0

[toviszsolt]

@terryupton Ok. This is not choppy, this is another render engine. You need to learn how to DOM and CSOM works. I think the problem is in your case the DOM manipulation time. Try to do it in one instance. Welcome in the WebDevelopment Funny World...

[terryupton]

@sivot I have used this technique many time before without issue (it used to work in Chrome iOS). It works everywhere else I have tested except in Chrome on iOS. I don't think I need to learn about the DOM and CSOM in order to implement a simple animation.

If I did it in once instance, then I would not get the effect of each item sliding in down separately, it would be just a block sliding in and this wouldn't look right.

I would describe this as Choppy.

Choppy
/ˈtʃɒpi/ adjective
having a disjointed or jerky quality.

So wording aside - it certainly isn't smooth like it should be.

[toviszsolt]

@terryupton I checked again your videos, please see #932. In your Chrome video there is no animations.

[warengonzaga]

@terryupton what I can see is a bug in chrome... I think we need to create a dummy animation for your issue and put in codepen so everyone can debug and solve it. Are you able to reproduce this issue? Let's use Codepen for debugging.

[toviszsolt]

@warengonzaga

Reason and Solution here: #932.

Codepen Tester: https://codepen.io/ericwbailey/pen/PWJPrW

As you can see need to update the css rule with a simple parameter in your library...
@media (prefers-reduced-motion) -> @media (prefers-reduced-motion: reduce)

Because, with the new Chrome and Firefox update fires the reduce option basically if not parameter set.

You can test it on Windows 10:
Settings -> Ease of Access -> Show animations in Windows -> Turn Off
Then need to reload the page in your browser...

[eltonmesquita]

Alright, I'll close this as it's a duplicate of #928 .

[warengonzaga]

Hi @moander can you replicate your issue in codepen?

[moander]

@WarenGonzag sorry I thought I was commenting on a quasar issue ;)

quasarframework/quasar#5809