search

percy / percy-puppeteer

Visual testing with Puppeteer and Percy
https://percy.io
MIT License
49 stars 16 forks source link

CSS viewport units are not correct on chrome headless #105

Closed Xayah2709 closed 3 years ago

Xayah2709 commented 5 years ago

When using vw or vh units, it's messing up with Chrome's screenshots.

Expected Result (Firefox):

https://storage.googleapis.com/percy-images/71e5fe95419f5eefdd8fe2ca59c0adf29e476804d325f77f29cf447ef1d6b761

What we've got (Chrome):

https://storage.googleapis.com/percy-images/084d15a107e3d710529c47b47632700e8d00acfa767aba2cddb1688d3a907d16

Seems related to https://github.com/GoogleChrome/puppeteer/issues/703

Is there any way of fixing that issue in percy?

Robdel12 commented 5 years ago

Hey Thibaut,

You've hit an unfortunate Chrome bug here. We're hoping Google will correct this upstream so we're not needing to introduce clever hacks. FWIW, Percy is not taking a screenshot on your system. We're taking a DOM snapshot & then collecting the needed assets to render that DOM. Then we render it concurrently across widths & browsers in our own rendering infrastructure.

The best thing we can recommend is to change the vh units to a % based unit using Percy specific CSS. It's not the best fix, but it'll work around this browser bug.

Xayah2709 commented 5 years ago

Thanks for your answer. That's infortunate, but I guess we don't have a lot of solution here.

It makes components with vw or vh unreliable to test with Chrome headless. Maybe adding some kind of note in the documentation (docs.percy.io) could be great.

Have you tried that workaround for Percy? https://github.com/GoogleChrome/puppeteer/issues/703#issuecomment-366041479

Robdel12 commented 3 years ago

Closing this one out (it was an infrastructure issue, not specific to an SDK). We have also fixed this almost a year+ ago in the infrastructure 👍🏼