jontewks/puppeteer-heroku-buildpack

flexbox align-items:center works locally but not on heroku with this buildpack

jeremymoore opened this issue · 3 comments

The image on the left is a screenshot fetched from a public url via a localhost instance of puppeteer. That same public url fetched via a heroku deployed version of the same puppeteer app produces the image on the right.

You'll notice all the type on the right is shifted toward the top of its containers. It seems it's not respecting our flexbox align-items: center.

We were able to reproduce in a simplified version of the same containers.

image

Any ideas of what might be causing this?

Hey @jeremymoore. This would be a better question for posting to the Puppeteer repo, this buildpack only installs dependencies on Heroku to allow Puppeteer to run there, but doesn't do anything with how Puppeteer works.

hi @jontewks that makes sense, i wanted to investigate here as well since we're finding the differences between puppeteer running locally vs deployed to heroku using this build pack. They're configured the same so I wondered if there are any libraries used that might affect this.

@jeremymoore shoot that is a good point. These libraries are only requirements to get Puppeteer running as shown in their trouble shooting guide although different versions could come into play. I don't have a good answer for you unfortunately. Is that a site that I can visit? Only wondering if perhaps screen size differences are causing other media queries to take precedence and thats what's causing the difference? Have you tried looking at any other sites where there are center aligned items to see if its wrong in more than one place?