Snapshot cropping does not consider new elements in the DOM on interactive stories
Closed this issue · 2 comments
In a project, I have several interactive stories, I am using the Play function and the snapshot is being taken at the right moment.
The problem is the cropping of the snapshot. Sometimes, using the play function I set a click on a button, with the effect that a new element will be rendered in the dom. But since the cropping will be decided on the first rendering, the snapshot will be smaller than desired, leaving the new elements "out of the picture".
The cropping should be decided just before taking the snapshot, at the end of the play function.
Chromatic captures everything within root container (once the rendering has stabilized and play functions are complete). AFAIK cropping is not decided on the first rendering.
Are the new elements added to the DOM outside the root container? For example, modals, dialogs, etc.? If so, you can follow this recommendation: https://www.chromatic.com/docs/github-actions/#command-exit-code-for-required-checks
You are right. The new elements are outside of the root container. There was an unexpected portal that I didn't notice.
I managed to work around the problem creating a dummy container with the necessary height to manipulate the cropping functionality.
Thank you for your answer!