Padding added in screenshots when using a wrapper with "display: contents"
Opened this issue · 1 comments
veej commented
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](https://private-user-images.githubusercontent.com/925635/252900211-2b63b7fb-bef2-4513-a4e1-7d492d446e73.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjA1MzA2MDYsIm5iZiI6MTcyMDUzMDMwNiwicGF0aCI6Ii85MjU2MzUvMjUyOTAwMjExLTJiNjNiN2ZiLWJlZjItNDUxMy1hNGUxLTdkNDkyZDQ0NmU3My5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjQwNzA5JTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI0MDcwOVQxMzA1MDZaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT03YTUyMzFjOGQ2Y2I3Mzg2ZDYyZTA1MWE4MTEyNTI2YjkzNzgwZWVjYzAyZGVjYTM1NDU0NTU4ZmEwMTkxYzg1JlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCZhY3Rvcl9pZD0wJmtleV9pZD0wJnJlcG9faWQ9MCJ9.apyzR_HOfyKQAMpDAM4NbU6_d_W5Q-RDi7M1OQajfR8)
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
patbeqo commented
+1