nuxt-modules
Icon is not animating correctly
Environment
- Operating System: Darwin
- Node Version: v23.7.0
- Nuxt Version: 3.15.4
- CLI Version: 3.21.1
- Nitro Version: 2.10.4
- Package Manager: [email protected]
- Builder: -
- User Config: extends, modules, devtools, runtimeConfig, future, compatibilityDate, site, hub, auth, content, image, eslint, css, colorMode
- Runtime Modules: @nuxtjs/[email protected], @nuxt/[email protected], @nuxt/[email protected], @nuxt/[email protected], @nuxthub/[email protected], @nuxt/[email protected], [email protected], [email protected], [email protected], motion-v/[email protected]
- Build Modules: -
Version
v3.0.0-alpha.12
Reproduction
Jusy load the animated icon anywhere in a page.
For example:
<Icon name="line-md:loading-twotone-loop" />
Description
The issue occurs both when I run the app in development mode and when I build it for production. I tested it on Safari (Mac and iPhone) and Chrome (iPhone only). On the first page load, the animation works fine, but when I reload the page, the animation stops. However, when the component where it is used updates, the icon state changes (still without animation).
Here I placed some icons randomly in the pages to show the problem and when it occurs:
https://github.com/user-attachments/assets/ca9772d8-61bb-47da-9b9e-38cbb8d5796c
).
Add mode="svg" to fix it.
When animated icon is rendered as background or mask image, animation timer starts the first time icon is rendered and is never reset. I've reported that as bug to Chromium devs a while ago, they closed issue as working as intended, so they aren't fixing it.
@cyberalien Thank you very much for your response. This should be mentioned in the documentation if it isn’t already.