sometimes `disable-animation.css` might not applied as expected

Describe the bug

We've been doing Visual Regression Test with our mui-based components. (over 200 snapshots) We keep having some flaky snapshots with dialogs and input like below.

opacity of the background overlay is different.

Modal is not fully open.

Input caret shows up.

The package versions I use is this Using puppeteer v9 because I saw this.

    "storybook": "7.0.18",
    "puppeteer": "9.1.1",
    "storycap": "4.1.1",
    "reg-suit": "0.12.1",

I'm not yet fully understand puppeteer and this codebase but maybe this.page.addStyleTag add the css to the route but not applied to iframe ?

As workaround If I do this. (re-adding disable-animation after CapturingBrowser's initialization) I think the problem has been solved.

export const decorators = [
  // ..., 
  // other decorators
  (Story) => {
    // https://github.com/reg-viz/storycap/issues/464
    if (isScreenshot()) {
      function addStyle(styleString) {
        const style = document.createElement('style');
        style.textContent = styleString;
        document.head.append(style);
      }
      addStyle(`
        *,
        *::before,
        *::after {
          transition: none !important;
          animation: none !important;
        }
        input {
          caret-color: transparent !important;
        }
      `);
    }
    return <Story />;
  },
];

reg-viz / storycap

sometimes `disable-animation.css` might not applied as expected #766

Describe the bug