Background is flashing when switching stories

[Mikilll94]

Describe the bug
When switching stories, the background is flashing which is really annoying.

To Reproduce

https://github.com/Mikilll94/storybook-flash

System

Environment Info:

  System:
    OS: macOS 11.6.1
    CPU: (16) x64 Intel(R) Core(TM) i9-9980HK CPU @ 2.40GHz
  Binaries:
    Node: 16.13.0 - /usr/local/bin/node
    Yarn: 1.22.15 - /usr/local/bin/yarn
    npm: 8.1.0 - /usr/local/bin/npm
  Browsers:
    Chrome: 96.0.4664.110
    Firefox: 95.0.2
    Safari: 14.1.2

Additional context
This flashing background behavior was not present in Storybook 6.4.0-beta.15. I don't know exactly which Storybook version introduced this annoying behavior.

[shilman]

Does this help? cc @yannbf #13711

[Mikilll94]

@shilman
Yeah, this works. But this is not a solution. In my app there is only a black background and I don't want this transition effect by default when switching stories. I don't want to instruct developers to change something in Mac settings. And what if they are working on Windows?

I think this transition effect only makes sense when switching backgrounds, not when switching stories.

[buondevid]

Having the same problem... I have a default white background and when I switch stories it briefly goes to grey to become white right after. It's a bit annoying.

This is my solution at the moment if it can be useful for someone (just replace white with your final colour):

// main.js

module.exports = {
  /* fix Storybook background flashing, at least for our default color (white) */
  previewHead: (head) => `
    ${head}
    <style>
      body {
        background-color: white !important;
      }
    </style>
  `
}

The limitation is that it's just gonna avoid flashing with one colour. If you can choose multiple background colours in your Storybook, then when you switch it, it will go back flashing. But it fixes it for at least one colour, the default one.

Before (flashing)

Screen.Recording.2022-01-13.at.12.01.27.mov

After (no flashing)

Screen.Recording.2022-01-13.at.12.02.32.mov

Why it happens

It looks to me that the problem is the background-color declared on the iframe body which somehow gets loaded very fast or takes briefly precedence anyway for some CSS properties. Once you put something that gets loaded as fast or before it, it doesn't get in the way anymore.

[Mikilll94]

@shilman
Is it going to be fixed? For me it's a major blocker and I cannot update to the latest Storybook version.

You can also remove "needs triage".

[yannbf]

I found the version which introduced the bug but I'm not sure what's causing it exactly:

https://github.com/storybookjs/storybook/releases/tag/v6.4.0-beta.33

@tmeasday @shilman do you think it could be related to the changes for the docs loading state?

[tmeasday]

@yannbf I guess it is likely because the "story loading" spinner is ever so briefly appearing. Probably wouldn't be an issue (?) if there wasn't the animation when the background comes back -- is that right?

I don't really have good context on the backgrounds addon @yannbf but I wonder if there is some way to do this:

I think this transition effect only makes sense when switching backgrounds, not when switching stories.

[Axedyson]

Here is a duplicate issue:
#17010

I have the exact same issue, take a look at my storybook library and switch components to see the bug in action:
https://619aa417876c17003a24f46a-hwutncibag.chromatic.com/?path=/story/button--primary

The repo for the code is here:
https://github.com/AndysonDK/syncbase

[dsk90it]

I also found a workaround that flickering issue occurs due to transition property. By default storybook comes with transitioned background (Pls check attached screenshot).

Solution : Turn off transition property for body element

Step 1. Add preview-body.html inside .storybook folder
Step 2. Inside preview-body.html override default CSS.

<!-- .storybook/preview-body.html -->
<style>
  body {
    transition: none !important;
    /* Add your custom background-color and color properties here it will reflect in all stories by default */
  }
</style>

Step 3. Start the dev server by disabling cache start-storybook --no-manager-cache to see the result. (After working run dev server with your regular script)

[Axedyson]

@dsk90it Thanks your workaround works for me! I'll be using this until this gets fixed

[shilman]

Hurrah!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.5.0-alpha.52 containing PR #17753 that references this issue. Upgrade today to the @next NPM tag to try it out!

npx sb upgrade --prerelease

Closing this issue. Please re-open if you think there's still more to do.

[Nabil-MEDIOUNI]

Hi @shilman I'm using Storybook V8.0.10 along with storybook-dark-mode v4.0.0.

Here's the present scenario: upon initially navigating to a story after clearing the cache, the screen flickers between dark and light modes. However, if I've previously visited that particular story, this flashing behavior doesn't occur.

Untitled_.May.9.2024.10_19.PM.webm

main.ts

import type { StorybookConfig } from '@storybook/react-vite';
import { mergeConfig } from 'vite';

const glob = require('glob');
const path = require('path');
const appDirectory = path.resolve(__dirname, '../');
const getStories = () =>
  glob.sync(
    `${appDirectory}/packages/**/*.@(stories.js|stories.jsx|stories.ts|stories.tsx)`,
    {
      ignore: `${appDirectory}/packages/**/dist/**/*.@(stories.js|stories.jsx|stories.ts|stories.tsx)`,
    }
  );

const config: StorybookConfig = {
  core: {},
  framework: {
    name: '@storybook/react-vite',
    options: {},
  },
  stories: getStories(),
  addons: [
    '@storybook/addon-links',
    '@storybook/addon-essentials',
    '@storybook/addon-a11y',
    '@storybook/addon-interactions',
    '@storybook/addon-coverage',
    'storybook-dark-mode',
  ],
  async viteFinal(storybookConfig) {
    return mergeConfig(storybookConfig, {
      resolve: {
        preserveSymlinks: true,
      },
      server: {
        fs: {
          allow: ['..'],
        },
        watch: {
          ignored: ['!**/node_modules/@banking-platform/**'],
        },
      },
      assetsInclude: ['**/*.md'],
    });
  },
  docs: {
    autodocs: true,
  },
};

export default config;

preview.jsx

import { create } from '@storybook/theming';

import Docs from '../../.storybook/docs';

import { createDarkTheme, createLightTheme } from '../../.storybook/theme';

import '../../.storybook/assets/stories.scss';
import '../../.storybook/assets/style.scss';

import ThemeDecorator from './theme-decorator';

const lightTheme = create({
  ...createLightTheme,
});

const darkTheme = create({
  ...createDarkTheme,
});

const customViewports = {
  mobile: {
    name: 'Mobile',
    styles: {
      width: '600px',
      height: '963px',
    },
  },
  tablet: {
    name: 'Tablet',
    styles: {
      width: '840px',
      height: '1194px',
    },
  },
};

const parameters = {
  backgrounds: {
    default: 'Surface',
    values: [
      {
        name: 'Background',
        value: 'var(--color-background-default)',
      },
      {
        name: 'Surface',
        value: 'var(--color-surface-default)',
      },
    ],
  },
  controls: {
    matchers: {
      color: /(background|color)$/i,
      date: /Date$/,
    },
  },
  options: {
    storySort: {
      order: ['Foundation', 'Actions', 'Inputs'],
    },
  },
  darkMode: {
    current: 'light',
    dark: darkTheme,
    light: lightTheme,
  },
  docs: {
    page: () => <Docs framework="react" />,
  },
  viewport: { viewports: customViewports },
};

const decorators = [
  (Story) => (
    <ThemeDecorator>
      <Story />
    </ThemeDecorator>
  ),
];

const preview = {
  parameters,
  decorators,
};

export default preview;