sometimes disable-animation.css might not applied as expected

[kodai3]

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 />;
  },
];

maybe related to #327