Unexpected CSS transitions on mount

[PavelLaptev]

Describe the bug

Hi! I'm experiencing a strange behavior in some components in Svelte. Some elements mount while firing CSS transitions.
Here's how it works — I have a component with a transition property like this:

.tip-button {
  color: red;
  transition: color 1s;

  &:hover {
    color: black;
  }
}

On mount, it animates from the default color (set in body) to the one specified in the class. Here's how it looks when I refresh the page:

Screen.Recording.2025-05-19.at.21.27.06.mov

This doesn't happen for all components. To prevent this behavior, I wrote a custom hook that adds and removes a class with transition: none for glitching elements. But this is just a temporary workaround.

It seems like I might be missing something, but I can't figure out what. Appreciate any help :-) Thank you in advance.

Reproduction

I don't have a REPL, so I can't reproduce it there. Everything works fine in the REPL. However, in this component, WorktreeTipsFooter.svelte, there's a section with a class tip-footer__tips that has this effect. It's the one shown in the video above.

Logs

System Info

System:
    OS: macOS 15.4
    CPU: (12) arm64 Apple M3 Pro
    Memory: 114.56 MB / 36.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 22.11.0 - ~/.nvm/versions/node/v22.11.0/bin/node
    npm: 10.9.0 - ~/.nvm/versions/node/v22.11.0/bin/npm
    pnpm: 10.3.0 - ~/Library/pnpm/pnpm
  Browsers:
    Chrome: 136.0.7103.114
    Safari: 18.4
  npmPackages:
    svelte: catalog:svelte => 5.28.2

Severity

annoyance

[PavelLaptev]

Another example. There are no animations, only transition properties:

Screen.Recording.2025-05-19.at.22.01.13.mov

[munHunger]

If I were to guess you have customElements: true in your compiler options, and somewhere you are referencing the node that get rendered during mount (ex with a svelte action or transition).

I have at least seen this exact thing before and there is also the issue #15773 that seems related to this.

[PavelLaptev]

Thank you for the answer @munHunger
I tried several ways to prevent this, and the only thing that helped was moving everything into a single component.
I wasn't using any custom components or Svelte transitions.

UPD. Looks like in my case css: 'injected' in svelte.config.js is the issue. If it's off, there is no issue