Parasite artifacts on screenshots

[theKashey]

1. Storybook stories panel is partially visible (left bottom corner, a few pixels). Iframe itself has background:white, but "story container" is 10% transparent

2. Resize element from addon pannel is visible thought iframe due to z-index

Solution for both cases - remove all additional panels using get props.

[dhlavaty]

Same here. Whatever I do, I always have some "dirt" on my screenshots.

Generated screenshot:

How it looks in Storybook web:

I have tried everything I could found in docs, to get rid of resolutions (right bottom corner), but nothing works. Setting global delay ( https://github.com/tsuyoshiwada/storybook-chrome-screenshot#withscreenshotoptions-- ) does nothing. Seting delay per story file does not work neither.

I've reported this one a few months ago https://github.com/tsuyoshiwada/storybook-chrome-screenshot/issues/58

[dhlavaty]

So I finally found a hack, how to hide those artifacts:

In disable-animation.js file, do this:

(() => {
  // HACK to hide some Parasite artifacts on page
  window.top.document.getElementsByClassName('Resizer horizontal')[0].style.display = 'none';
})();

[theKashey]

import {remock} from 'react-remock';
import Dimensions from '@storybook/components/dist/layout/dimensions';

remock.mock(Dimensions);