V-Ripple animation fails in iOS 3rd party browsers

[PowerWeb5]

Describe the bug V-Ripple animation (and possible others) is extremely choppy, about 2 frames total for most 3rd party mobile browsers for iOS (iCab Mobile, Firefox, Edge, etc. apps), confirmed on all those browsers for both iPad and iPhone.

After tapping any element with v-ripple, it then goes straight to showing a single dark shaded touch indicator circle in 1st frame, then seems to go straight to the end frame of a completely dark shaded button, with what appears to be no animated frames or interpolation in between.

Animation appears fine with the built-in Safari Mobile browser, but not 3rd party browsers. The sole exception I've seen seems to be Chrome for iOS, where the ripple animation appears correctly.

To Reproduce Steps to reproduce the behavior:

1. Go to https://codepen.io/pen/?&editors=101 on iPad or iPhone with iCab Mobile, Firefox, or Edge app
2. Click on any button from sample, such as the one labeled "Standard"
3. Ripple animation shows ~2 frames only, though takes same amount of time, appearing severely lagged or with no interpolation at all.
4. Repeat after changing the user agents (to WebKit iOS, Safari (iPad), etc) and Filters enabled or disabled, then refreshing, and still same animation issue
5. Repeat with Safari Mobile, animation appears fine
6. Repeat with Chrome for iPad, animation appears fine
7. Repeat in desktop browsers (eg. Edge or Chrome on Windows 10) and animation appears fine

Platform (please complete the following information): Quasar Version: v2.4.3 iPad OS v15.1 for iPad Pro (12.9") (2nd generation) iOS 15.1.1 for iPhone 12 Pro Max iCab Mobile, Firefox, Edge and most other 3rd party browser apps (excluding Chrome)

[pdanpdan]

By 3rd party browsers you mean Safari (the only browser engine on iPhone/iPad)? Anyway, I cannot reproduce with Firefox skin, neither with Chrome skin.

A reproduction case would have helped a lot in that case, and maybe a video capture?

[PowerWeb5]

See below how choppy the ripple animation is in iCab Mobile on iPad in this video, especially noticeable with how long the touch circle on right side of clickable item remains.

https://user-images.githubusercontent.com/4053734/148602071-33fde5f2-8382-4005-941e-a77f725b7e3f.mp4

Compare to the smooth animation shown below in Safari Mobile on iPad.

https://user-images.githubusercontent.com/4053734/148602103-a69f04d7-3452-40bc-ba32-7fc081f033da.mp4

This is most easily seen when clicking a clickable list item on this page: https://quasar.dev/vue-components/list-and-list-items#basic

I am aware that Safari is the only browser engine on iOS, which is what makes this especially strange. That's why I mentioned trying out different User Agents in case differences there might resolve it. You can try emulating latest Safari user agent in iCab Mobile as custom user agent string to see if related. Or might be animations are especially suspectible to overhead or reduced JS engine performance in custom browser apps.

I suggest trying in iCab Mobile browser app as issue is most pronounced and consistent there. With iPad OS 15.1 on iPad Pro 2 in my case. As mentioned, it does not occur in Chrome app, and it occurs on Edge just on certain devices (iPhone 12 Pro Max but not iPhone 12 Mini, both with iOS 15.1.1). I wounder if aspect ratio or resolution matters.

[PowerWeb5]

I tried using same User Agent string from Safari on iPad in iCab Mobile on iPad and issue still remained, for user agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_6) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/15.1 Safari/605.1.15

Though possibly other browser sniffing differences could remain.

[pdanpdan]

It looks like iCab mobile is pay to play wrapper of the WebView :) From the reviews it looks like you might try "use the modern Web engine, not classic" The ripple code and css has no ios device version, so playing with user agent does not matter Just for fun, can you reproduce it on this? https://pdanpdan.github.io/quasar-docs/vue-components/list-and-list-items#basic But more than that I cannot help Btw, your mov video cannot be played outside apple world

[PowerWeb5]

I've reproduced on 5 out of 5 iPads and iPhones now. It isn't specific to iCab Mobile, as I reproduced in Edge and Firefox apps too on iOS. iCab Mobile has since 2020 only used the modern browser engine, with classic option removed.

If I clear cache in iCab or Edge (occurs for both), after closing all tabs, and then kill the app, relaunch then visit https://pdanpdan.github.io/quasar-docs/vue-components/list-and-list-items#basic first (which seems to use old Quasar v1?) then the issue does not occur, even in iCab.

once I then open https://quasar.dev/vue-components/list-and-list-items#basic then randomly it will either A) result in both open tabs (v1 and v2) having the animation issue even after tab refresh or B) both open tabs are fixed with no animation issue.

However, if I clear cache then open https://quasar.dev/vue-components/list-and-list-items#basic before the Quasar v1 page then both pages will have the issue occur.

It seems like may be some bug with v2.X cached animation-related resources, which ends up getting shared with v1 pages if Quasar v2 was loaded first. Not sure if use of Codepen on those pages is relevant.

Here is possibly more compatible MOV with combined videos, first showing issue in iCab Mobile and then showing expected smooth animation in Safari:

https://user-images.githubusercontent.com/4053734/148601447-48840671-ab5e-4dab-8ebf-29c533369488.mov

[PowerWeb5]

Here are the compatible MP4 versions of videos:

See below how choppy the ripple animation is in iCab Mobile on iPad in this video, especially noticeable with how long the touch circle on right side of clickable item remains.

https://user-images.githubusercontent.com/4053734/148602071-33fde5f2-8382-4005-941e-a77f725b7e3f.mp4

Compare to the smooth animation shown below in Safari Mobile on iPad.

https://user-images.githubusercontent.com/4053734/148602103-a69f04d7-3452-40bc-ba32-7fc081f033da.mp4

[PowerWeb5]

If I open the v2.x ripple-using page 1st after clearing iCab/Edge edge on iOS, then it even ripple/animation on other pages like Vuetify at https://vuetifyjs.com/en/directives/ripple/#usage causing the animation issue to affect them too, until I clear the cache, so seems like it might be an issue with a dependency in common between Quasar and Vuetify (eg Animate.css, etc.?).

However, just with the latest Quasar's version of it, since opening https://vuetifyjs.com/en/directives/ripple/#usage first or opening Quasar v1 page 1st does not result in this issue. Maybe update or rollback to older version of whatever dependency is causing the issue might help, as well as submitting bug report to the dependency's team?

[pdanpdan]

Can you also try with these 2 (exclude oficial Quasar v2):

• https://pdanpdan.github.io/quasar-docs/vue-components/list-and-list-items#basic
• https://v1.quasar.dev/vue-components/list-and-list-items#basic See if official v1 generates the same problems (because my v1 branch uses other algo) That way we can detect if it's a regression in Qv2 or a problem in original algo

[PowerWeb5]

No issue with those 2 links

[PowerWeb5]

I tested outside context of Codepen embedding/hosting, with ripple animation on tabs and hamburger menu buttons for https://quasar.dev/layout-builder and the issue did not occur for it at first. However, like Vuetify and v1 pages, once you open up a v2 docs page (with the buggy animation resource version?), then it introduces the bug into that Layout Builder page too when switching back to it, until clearing the cache, so that Tabs and Menu button then have the animation issue.

Does https://quasar.dev/layout-builder use an earlier v2 (without the bug) or v1?

[PowerWeb5]

What is especially problematic with this bug is the viral nature of it. Once you visit a Quasar page with this buggy resource, it corrupts that resource or breaks animation across the web - for other Quasar sites/domains and even non-Quasar sites like https://vuetifyjs.com/en/directives/ripple/#usage - ever afterwards (consistently or intermittently) until clearing browser cache.

[rstoenescu]

@PowerSheetAI

1. I cannot tell for other frameworks, but Quasar does NOT use ANY external dependencies for the UI package.
2. There is no such thing as one website influencing another one, unless that specific browser is really buggy.

[rstoenescu]

Can you reproduce the issue by first visiting https://quasar.dev/layout-builder ?

[PowerWeb5]

No, when visiting quasar.dev/layout-builder first, the issue does not occur.

However, if I clear cache and then visit https://quasar.dev/vue-components/list-and-list-items#basic first the issue occurs there, then if I open https://quasar.dev/layout-builder or else Quasar v1.x pdanpdan.github.io/quasar-docs/vue-components/list-and-list-items#basic in a new tab (after that issue occurred on the other page), then and only then will the issue occur on https://quasar.dev/layout-builder and pdanpdan.github.io/quasar-docs/vue-components/list-and-list-items#basic. Otherwise it does not occur on those pages.

Maybe it is a browser issue, but if so, it's shared across several iOS browser apps (most visible in iCab Mobile, but also Edge and Firefox) and reproduced on 5 out of 5 different iPad and iPhone devices, and does not seem to occur in Safari or Chrome apps on iOS, and does not occur if had only ever opened Quasar v1.x pages.

[PowerWeb5]

What libraries are involved in ripple animation (even if bundled together)? Just animate.css primarily? Is it possible there is some compatibility issue between a newer version of animate.css and certain Safari-based iOS browser apps?

It seems like other drastically reduced framerate or no interpolation at all, though animation duration remains the same.

[PowerWeb5]

1. Kill iCab Mobile (or similar browser app) process on iPhone/iPad
2. Open https://quasar.dev/vue-components/list-and-list-items#basic and see ripple animation issue
3. Open https://quasar.dev/layout-builder in new tab and see animation issue
4. Kill iCab Mobile (when left https://quasar.dev/layout-builder as last open tab)
5. Launch iCab Mobile so reopens last active tab (https://quasar.dev/layout-builder) or manually open it from empty session (and don't view https://quasar.dev/vue-components/list-and-list-items#basic first) and you will see that https://quasar.dev/layout-builder does not have the issue

It seems like animation gets broken during browsing session in a way that affects other pages, so that killing the browser process and relaunching is what fixes more than clearing the browser cache. But Quasar v2.x pages (which I assume bundles in a different version of Animate.css than v1.0) are the only pages I've ever seen start this issue off.

Opening https://pdanpdan.github.io/quasar-docs/vue-components/list-and-list-items#basic based on Quasar v1.x does not result in triggering this animation issue. And it does occur across multiple different iOS browser apps.

[PowerWeb5]

Even worse, it seems all animations are completely broken when this occurs with Quasar v2.x, until killing the browser app. Like seen in below video, even transition animations no longer shown at all (not just low FPS or lack of interpolation). With same steps to reproduce as in previous reply, but on page https://quasar.dev/vue-components/menu#transitions

Video of when animation stops working (no transitions, no interpolation for ripples, etc) in iCab Mobile (and Edge) on iOS:

https://user-images.githubusercontent.com/4053734/148668806-c3835ba1-e8e5-46d9-bd10-1a638122258e.mp4

[PowerWeb5]

Video of transition & ripple animation always working fine always in Safari for iOS (and Chrome for iOS):

https://user-images.githubusercontent.com/4053734/148668988-7e6b5417-0778-428e-b482-da696a73b656.mp4

[PowerWeb5]

Since Quasar v1.x pages like https://pdanpdan.github.io/quasar-docs/vue-components/list-and-list-items#basic and also other non-Quasar implementations of ripple etc animations like https://vuetifyjs.com/en/directives/ripple/#usage do not cause this issue, can you rollback Animate.css or whatever dependencies might be relevant (and/or try updating them to newer or beta version, if relevant) and see if that avoids the issue?

Breaking all CSS animations (transition, ripple, etc.) for all Quasar and even non-Quasar pages immediately upon any CSS animation occurrence seems like a major issue worth reverting dependency version, if that is the cause.

When I reported to iCab Mobile developer Alexander Clauss support@icab.de, he mentioned that CSS animation crashing has been seen before as issue with iOS browser apps, but just rarely after long periods of extended usage and memory pressure.

However, something unique to what Quasar v2.x is doing makes this CSS animation process (even affecting other websites) break app-wide immediately, which is seems hasn't been seen before. I'd suggest also reporting this bug to Apple once identify the root cause (or what animation feature or dependency version triggers it).

[rstoenescu]

This is getting tiresome. How many times do I have to repeat myself that Quasar does not uses any external dependencies. Ripple does not uses animate.css nor any other external stuff. There's nothing to roll back to. The only difference of Quasar v2 vs Quasar v1 is that Quasar v2 uses Vue 3 and Quasar v2 uses Vue 2. The Ripple in v2 and v1 is EXACTLY the same. This and only this: https://github.com/quasarframework/quasar/blob/dev/ui/src/directives/Ripple.js

I am currently investigating a memleak in Vue 3 (so outside of Quasar anyway) which might cause problems such as these, where it appears for one website to affect another (no other logical explanation other than memory pressure). But I can't snap my fingers and figure it out instantly, so you'll have to be patient while I investigate Vue 3.

[PowerWeb5]

I mentioned that after noticing that Quasar Extras has Animate.css as a dev dependency (seen here https://www.npmjs.com/package/@quasar/extras), in case that it was bundled in some alternative way at build-time, and wasn't sure if you were referring to just not being used in Quasar core or not referenced in any way as a runtime dependency that could be cached (since my last post asked whether this might be caching issue).

In that case, if there is no external dependency, then I was suggested considering rolling back whatever difference there might be regarding Ripple etc. implementation to see if that was the cause, if you have no other leads (I wasn't sure if this was being looked into or a priority, glad to hear it is) as this seems like a pretty difficult to debug or isolate issue.

Just a side note, iCab Mobile's developer notes that the Safari Mobile browser engine internally does use some internal caching of views for animations/rendering which can take place for similar effects which can take place even if no external dependencies are used, beyond just caching for the same file/URL.

One point in favor of memory pressure being a cause: It seems issue does not occur as often if launch browser only opening 1 Codepen with individual sample vs when clicking on a button with ripple inside of a documentation page.

But if you have some leads on possible causes, great, all the better. I appreciate your looking into it.

[rstoenescu]

Can this be tested again? (Upgrade q/app) Some memory leaks have been fixed in Vue 3.2.27 and 3.2.25. https://github.com/vuejs/core/commit/2e3e183b4f19c9e25865e35438653cbc9bf01afc https://github.com/vuejs/vue-next/commit/ed9eb62e5992bd575d999c4197330d8bad622cfb

Please reopen if it's still happening. It means the root cause is another mem leak in Vue.

[zookz]

Hello there.

This is still a problem with latest iOS version and latest Chrome version. Ripple effect is very laggy.

[cchen-ownit]

Observing similar issue with QItem hover shading animation on Chrome in macOS

https://user-images.githubusercontent.com/104771017/177367192-1c00d139-9990-4b65-b557-ba78fd8ffc63.mp4

When I enable the performance profiler, the behavior works as expected oddly enough.

The same behavior does not occur in Firefox on macOS. Safari also works fine; just Chrome it seems like.