Backstop does not correctly render web pages

[empeekdev]

Hi, we want to use BackstopJS to monitor design "crashes" on our WordPress site. For some reason Backstop differently render web page for reference and test cases ( different font size, also I noticed that sometimes images does not load at all). I set 1920x1080 screen size but looks like that reference and test rendering in different screen size. I tried also docker way to run Backstop but it has the same problem. I thought this problem related only to our site but when I tried to use google.com the same problem appeared. Do you have any idea what I'm doing wrong?

[klodoma]

Please give it first a try with asyncCaptureLimit: 1 and let us know how that goes.
I am also experiencing inconsistent results over web-pages and still not sure where that comes from. (maybe related to #1343 ?)

[nilsbentlage]

Hey Folks,
im experimenting with this, too. There's one workaround i found:
Using 'html' as the selector in the scenario options, helps me to get more consistant results. Interesting about this: Some IMGs (we're loading them as base64 strings) are displayed correct only when i select the html. If i leave that blank (document) sometimes they are printed in the screenshot, sometimes not.

Another thing i did to improve performance and stability: I wrote a script, triggered by a URL Parameter that uses jQuery to delete anything below 16000px and also sets overflow-x: hidden to the body element.

Let me know if you got a tip how to render these images properly without using the html-tag as a selector.

Greetings!

[klodoma]

Some suggestions:

• make sure that the fonts are "pre-loaded", this is an issue that I've experienced over and over. By fixing this on the website, fixed also the backstop font issue capturing.
• use --docker for consistent capturing, if you use capturing on different machines, then this is a must-do otherwise you really get different results, slight changes

With image loading I still have issues "sometimes" but this is mainly on localhost environments.