6.1: Storyshot content shifted

[petermikitsh]

Describe the bug

After upgrading to 6.1, I had to regenerate storyshot baselines because screens shifted a couple pixels.

Example: my chip is slightly lower on the right. Storyshot on left generated with 6.0, right is 6.1.

To Reproduce

• Generate baselines with 6.0
• Upgrade to 6.1
• Observe storyshot diff failures

Expected behavior

Storyshots should be identical between 6.0 and 6.1

Screenshots

Here's another example:

Code snippets

Maybe this has something to do with layouts?

.storybook/preview.tsx:

export const parameters = {
  layout: 'centered',
};

System

$ npx sb@next info

Environment Info:

  System:
    OS: macOS Mojave 10.14.6
    CPU: (12) x64 Intel(R) Core(TM) i9-8950HK CPU @ 2.90GHz
  Binaries:
    Node: 12.18.0 - ~/.nvm/versions/node/v12.18.0/bin/node
    Yarn: 1.22.5 - ~/.yarn/bin/yarn
    npm: 6.14.4 - ~/.nvm/versions/node/v12.18.0/bin/npm
  Browsers:
    Safari: 12.1.2

Additional context
Add any other context about the problem here.

[shilman]

Probably related to layout parameter changes @ndelangen @ghengeveld ?

[ghengeveld]

Must be this one: fe05526

[ghengeveld]

By the way I don't see a visual difference in the images provided, but I'm not sure what I'm supposed to see. Should certain pixels be highlighted because they changed, or is that not how storyshots works? As far as I'm aware Chromatic hasn't detected any visual differences between 6.0 and 6.1.

Edit: oh I see now, the right-hand is aligned slightly lower.

[petermikitsh]

@ghengeveld I believe it's the css rule content: '';

Here's 6.0 vs 6.1 (see 6.1 has scrollbar):

Here's 6.1 with the rule turned off:

[shilman]

Ta-da!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.1.2 containing PR #13192 that references this issue. Upgrade today to the @latest NPM tag to try it out!

npx sb upgrade

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