nuxt / nuxt/ui

Marquee Component Flickers at the end of rotation in Firefox (any platform)

Open
#6,277 1 comment 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

triage
Dominant language
TypeScript
Stars
6.9k
Forks
1.1k
Avg merge
1d 7h
Merged PRs (30d)
57

Description

Environment
Operating system Linux 6.6.87.2-microsoft-standard-WSL2
CPU AMD Ryzen 7 7700X 8-Core Processor (16 cores)
Node.js version v24.14.1
nuxt/cli version 3.34.0
Package manager npm@11.11.0
Nuxt version 4.4.2
Nitro version 2.13.2
Builder vite@7.3.1
Config app, colorMode, compatibilityDate, components, css, devtools, dir, i18n, icon, imports, modules, nitro, pwa, runtimeConfig, typescript, vite
Modules @nuxt/eslint@1.15.2, @nuxt/image@2.0.0, @nuxt/test-utils@4.0.0, @nuxt/ui@4.6.0, @nuxtjs/color-mode@4.0.0, @nuxtjs/i18n@10.2.3, @nuxt/test-utils/module@4.0.0, @vite-pwa/nuxt@1.1.1
Is this bug related to Nuxt or Vue?

Vue

Package

v4.x

Version

v4.6.0

Reproduction

https://ui.nuxt.com/docs/components/marquee

Description

If you are using Firefox, the Marquee Component will flicker (content disappears briefly) when the end of the list is reached and the component is reset to the start to create the endless loop effect. You will be able to observe this behaviour even in the official documentation but you have to wait a couple of seconds for the marquee to reach the end. This only happens in Firefox but it does happen on every platform form (I tried MacOS, Windows 11, Ubuntu 24.04 LTS). The underlying issue could theoretically be with Firefox but either way, I think NuxtUI should address this behaviour.

Let me know if you are able to reproduce this. If so, I'm willing to investigate this and submit a PR if you want me to. But if it's easier for you to fix this yourself, that's fine too.

Thank you :^)

Additional context

Video of issue:

https://github.com/user-attachments/assets/fbf2f8c2-5a41-49f9-b322-195037d3aa3f

Logs

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the Marquee reproduction at https://ui.nuxt.com/docs/components/marquee and reproduce the end-of-rotation behavior in Firefox. Inspect the Marquee component implementation and verify that the content no longer disappears briefly while the endless loop still resets correctly.

Written by the indexing model from the issue text.

Assessment

Tech stack
nuxtjs, typescript
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Quiet
Clarity
Mostly clear
Newbie friendliness
52/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.