chromatic-cli icon indicating copy to clipboard operation
chromatic-cli copied to clipboard

Padding added in screenshots when using a wrapper with "display: contents"

Open veej opened this issue 1 year ago • 1 comments

Bug report

Whenever a div with display: contents is added anywhere in the rendering tree of a Story, Chromatic shows a diff with padding wrapping the whole Story component, even if no diff is visible in Storybook:

image

This is reproducible e.g. by adding a decorator to any story made as follows:

decorators: [
    (Story) => (
      <div style={{ display: "contents" }}>
        <Story />
      </div>
    ),
  ],

Chromatic v6.19.9 Storybook v7.0.26

veej avatar Jul 12 '23 08:07 veej