Unexpected Screenshots - Incorrectly Clipped or Only Partially Loaded

[chrismohr]

I'm seeing sporadically broken screenshots. Often they are clipped too small vertically, but other times the target component is only partially loaded.

It seems like a timing issue, because I'm able to mitigate the issue using puppeteer's slowMo config option. (20ms worked well for me, YMMV.)

I suspected that it could be related to our styleguide using an intersection observer to defer loading of components, but eliminating that did not help.

Versions:
"react-styleguidist": "7.0.14",
"react-styleguidist-visual": "0.5.0",

Clipped too short example:
Actual:

Expected:

Partially Loaded example:
Actual:

Expected:

Styleguidist Elements Visible
Actual

Expected

[jkarttunen]

I'm seeing exaclty same scripts failing on CI, but passing on local env

[jkarttunen]

My issue seems to be about puppeteer rendering fonts differently in linux than mac, with big headers it's enough to trigger a diff fail

[unindented]

My issue seems to be about puppeteer rendering fonts differently in linux than mac

That's expected. Each OS renders fonts differently. The way we get around this where I work is by using Docker to run react-styleguidist-visual and create all screenshots.

[jalyna]

I'm facing the same issue (my Styleguide only contains a very simple input field). The first one looks good but then it crops weirdly. I'm using Mac OS 10.13.6.

Is it also related to the font issue?

"react-styleguidist": "^7.3.5",
"react-styleguidist-visual": "^0.8.0"

[dgommers]

We are experiencing the exact same issue in a Docker setup (so no font issues).