Massive frame drops when scrolling overflow content inside of the command component

[inman-sebastian]

Describe the bug

When vertically scrolling the contents of the command component, I'm experiencing major frame drops. It only seems to be effecting the scrolling. All the other features of the component seem to work fine and I don't experience any performance issues. I tested this in multiple browsers and experienced the same issue. It's not exactly a major problem, but it does create a bit of a diminished user experience.

Reproduction

Not much needs to be done to reproduce this, in theory. I just copied and pasted the example code from the documentation website and ran it as-is to test it out.

<script lang="ts">
  import * as Command from "$lib/components/ui/command";
  import { onMount } from "svelte";
 
  let open = false;
 
  onMount(() => {
    function handleKeydown(e: KeyboardEvent) {
      if (e.key === "k" && (e.metaKey || e.ctrlKey)) {
        e.preventDefault();
        open = !open;
      }
    }
 
    document.addEventListener("keydown", handleKeydown);
 
    return () => {
      document.removeEventListener("keydown", handleKeydown);
    };
  });
</script>
 
<Command.Dialog bind:open>
  <Command.Input placeholder="Type a command or search..." />
  <Command.List>
    <Command.Empty>No results found.</Command.Empty>
    <Command.Group heading="Suggestions">
      <Command.Item>Calendar</Command.Item>
      <Command.Item>Search Emoji</Command.Item>
      <Command.Item>Calculator</Command.Item>
    </Command.Group>
  </Command.List>
</Command.Dialog>

Once I open the command menu and start scrolling through the items in the menu, that's when the frames start dropping.

Logs

I know you said to avoid images if possible, but I don't have a text log that I can share for this. In this image you can clearly see the frame drops where I was scrolling.

https://imgur.com/a/vnDLCUF

System Info

System:
    OS: macOS 14.3.1
    CPU: (16) x64 Intel(R) Core(TM) i9-9980HK CPU @ 2.40GHz
    Memory: 563.74 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.3.1 - ~/.nvm/versions/node/v20.3.1/bin/node
    npm: 9.6.7 - ~/.nvm/versions/node/v20.3.1/bin/npm
    pnpm: 8.15.4 - ~/Library/pnpm/pnpm
  Browsers:
    Chrome: 123.0.6312.58
    Safari: 17.3.1

Severity

annoyance

[github-actions]

Please provide a reproduction.

More info

Why do I need to provide a reproduction?

This project is maintained by a very small team, and we simply don't have the bandwidth to investigate issues that we can't easily replicate. Reproductions enable us to fix issues faster and more efficiently. If you care about getting your issue resolved, providing a reproduction is the best way to do that.

I've provided a reproduction - what happens now?

Once a reproduction is provided, we'll remove the needs reproduction label and review the issue to determine how to resolve it. If we can confirm it's a bug, we'll label it as such and prioritize it based on its severity.

If needs reproduction labeled issues don't receive any activity (e.g., a comment with a reproduction link), they'll be closed. Feel free to comment with a reproduction at any time and the issue will be reopened.

How can I create a reproduction?

You can use this template to create a minimal reproduction. You can also link to a GitHub repository with the reproduction.

Please ensure that the reproduction is as minimal as possible. If there is a ton of custom logic in your reproduction, it is difficult to determine if the issue is with your code or with the library. The more minimal the reproduction, the more likely it is that we'll be able to assist.

You might also find these other articles interesting and/or helpful:

• The Importance of Reproductions
• How to Generate a Minimal, Complete, and Verifiable Example

[github-actions]

This issue was closed because it was open for 7 days without a reproduction.