Console is scattered with "Rendering was performed in a subtree hidden by content-visibility." warnings

[bladerunner2020]

Summary

I'm getting multiple console warnings: "Rendering was performed in a subtree hidden by content-visibility" originating from runtime.js. Has anyone else encountered this issue? Any ideas on how to resolve it (other than hiding all runtime.js messages)?

It appears these warnings are coming from the Onboarding guide (storybook-checklist-widget). It's probably possible to disable this guide, but I haven't found how to do it.

Having the console spammed with these messages is quite annoying, so I'd appreciate any suggestions.

To reproduce: create a Vite React app and then add Storybook to it.

Thanks in advance for any ideas!

Additional information

No response

Create a reproduction

No response

[dosubot[bot]]

Hi @bladerunner2020! I'm Dosu and I’m helping the storybook team.

The console warnings are likely caused by the onboarding guide's checklist widget rendering in a hidden or collapsed state. You can disable the checklist widget (and suppress these warnings) by setting the following in your global Storybook settings file (usually at ~/.storybook/settings.json):

{
  "checklist": {
    "widget": {
      "disable": true
    }
  }
}

This will prevent the widget from rendering and should stop the warnings. You can also use the "Remove from sidebar" action in the widget's UI or the Guide page to mute or hide it without editing the settings file directly (reference, reference).

If you don't need the onboarding guide at all, you can remove @storybook/addon-onboarding from your .storybook/main.js addons list (reference).

Upgrading to the latest Storybook version is also recommended, as recent changes have improved the checklist widget's rendering and may reduce these warnings.

If you have a minimal reproduction or still see the warnings after trying these steps, please share your setup details for further troubleshooting.

To reply, just mention @dosu.

---

^{How did I do? Good | Irrelevant | Incorrect | Verbose | Hallucination | Report 🐛 | Other}

   

[bladerunner2020]

Dear @dosu thank you very much! Unfortunately, nothing helps:

• I have the most recent version of Storybook (10.1.4)
• I don't have @storybook/addon-onboarding in addons in .storybook/main.ts (that was the first thing I checked)
• I don't have it in the dependencies as well
• I tried to set disable: true in settings.json, but it didn't help

[dosubot[bot]]

This warning isn't coming from the onboarding addon—it's actually triggered by Storybook's core UI components, like Collapsible and ActionListItem, which use the CSS content-visibility property for performance. When Storybook renders content inside a collapsed or hidden section, Chrome logs this warning. These components are used throughout the UI, not just in onboarding, so the warning can appear even with no addons installed (Collapsible source, ActionListItem source).

There isn't a config option to suppress these warnings at the Storybook or Vite level right now. If you want to filter them out in development, you could use a custom error/warning filter in your browser's DevTools or patch your local Storybook preview to silence this specific message.

If you have a minimal reproduction (just Storybook + Vite + React, no addons), and still see the warning, that's expected with the current UI. If you notice it in other scenarios or have a workaround that works for you, please share! Otherwise, you can safely ignore the warning—it's a side effect of how Storybook optimizes UI rendering.

To reply, just mention @dosu.

---

^{How did I do? Good | Irrelevant | Incorrect | Verbose | Hallucination | Report 🐛 | Other}