Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

@chromatic-com/playwright - Using data-chromatic=ignore on an element that displays a date results in flaky diff checks #184

Open
ryan-case-ml opened this issue Jul 17, 2024 · 1 comment

Comments

@ryan-case-ml
Copy link

ryan-case-ml commented Jul 17, 2024

Describe the bug
I have an element in my UI that i wrap with a span that has the data-chromatic=ignore attribute so that I don't get diffs on it since that value can change daily (it displays a date). The problem is, since this date can change, so can the width of the element, causing Chromatic to flag it as a diff. According to chromatic docs, this is intended functionality:

It’s important to ensure the calculated bounding rectangle fully covers the changing content and maintains the exact dimensions as the baseline (e.g., width, height, and relative positioning). If the dimensions change, Chromatic will capture the incoming changes.

This is pretty frustrating to deal with. There has to be a better way to handle ignoring elements of varying widths.

@jackie-linz
Copy link

we run this this too. we worked around it by making the element wider (e.g. 100% of parent element) so the text length change does not impact element width

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants