Chromatic snapshots do not match the Canvas

[nina-rafieifar]

When using CSS selectors of level 4 such as :has(), the snapshots do not match the actual story. This is very difficult to debug because the inspecting tool on Chromatic shows that everything is fine on the Canvas yet the snapshot is different.

This is happening because Chromatic uses a completely different set of browsers to take snapshots than to what it uses to show Canvas for inspecting. The browsers you use for taking snapshots are old and don't support some CSS selectors. Is it possible to update them or at least add some documentation that you do not support CSS selectors level 4?

As an example, the following CSS will result in having a different snapshot to what it actually should be:

 li:has([data-active]) {
    background: blue;
 }

This is what it actually looks like in Storybook and on Chromatic's Canvas:

And this is the snapshot I get:

[nina-rafieifar]

I think this issue is related to this as well.

[ghengeveld]

Sorry for the trouble. We currently still run on Chrome 89 (which doesn't support :has) and are starting early access to Chrome 105 soon. Reach out to us via support chat if you want to get beta access. The reason it took so long to upgrade this time is that no version of Chrome beyond 89 reliably works on AWS Lambda anymore, so we had to completely rearchitect our capture infrastructure first. In the future we will roll out browser upgrades more regularly.

Closing this because it's not an issue with the CLI.