Viewport resolution in bottom right corner "burned into" every screenshot

[dhlavaty]

After upgrading Storybook from 3.3 to 3.4, some screenshots contains viewport resolution in bottom right corner. Like this:

This seems strange to me, because this resolution is displayed in browser when I resize window, and it is displayed for 1 second (this component is responsible for that https://github.com/storybooks/storybook/blob/release/3.4/lib/ui/src/modules/ui/components/layout/dimensions.js ). But it is not part of <iframe>, it is displayed in browser above this iframe.

First it seems strange to me, that storybook-chrome-screenshot is not screenshooting content of the <iframe>.

And second, as you probably guessed, I want to get rid of this viewport resolution from my screenshots. Setting delay to any value (I tried even extreme ones like 20 seconds) doesn't help. Resolution is still "burned into" my screenshot, although resolution should be hidden after 1 second. (see https://github.com/storybooks/storybook/blob/release/3.4/lib/ui/src/modules/ui/components/layout/dimensions.js#L26 )

And the funny thing is, resolution is burned only into stories that are longer (a.k.a. higher) - stories where is a need to scroll a page to see everything.

[dhlavaty]

Hack to hide viewport resolution:

Into storybook's preview-head.html file, add this:

<script>
  // HACK to hide page viewport resolution on page (for screenshot purposes)
  const $style = window.top.document.createElement('style');
  $style.innerHTML = `iframe + div {
    display: none !important;
  }`;
  window.top.document.body.appendChild($style);
</script>