Hello everyone! We've got a pipeline
Hello everyone! We've got a pipeline working where screenshots are taken of specific routes in our app that we want to use for generating thumbnail previews of pages — however when the pages contain CSS filters on images (right side of the browser window) the filters are not applied. Additionally, when we use backdrop filter blur on a content area (left side of the browser window) the backdrop blur is rendered but the content of the div is not.
The attached screenshot is a preview of the Cloudflare Browser Rendering API result positioned over top of the actual page that was being screenshot in the browser.
Is there anything we can do from our side to better troubleshoot this? We've done everything we can as far as vendor prefixing to make the effects as backwards compatible as possible. Are we hitting limits of the Browser Rendering API or are there ways to work around the issue?
Thanks in advance for your time!
5 Replies
Screenshots of
1: The code that's being applied to create the content background blur (Vue 3).
2: the CSS that is being applied to the background image to make the black-and-white effect.
Interestingly, ScreenshotOne which also uses the Cloudflare Browser Rendering API is able to take a screenshot of the page with the filters on the images and the background blur rendered appropriately.
This leads me to believe that we must be missing something in our own setup that we need to enable in order to better support these effects in our own pipeline.
UPDATE: for the background images it's because I made a mistake! :tada_vue:
Our app was importing the filters CSS file in the editor but not on the published pages routes. So in our local testing we'd see the filters because they were already loaded, but on the "live" (not launched) app the filters CSS file was never loaded. DOH!
Now I just need to figure out why the backdrop blur filter results in all child content not rendering.
so, slight progress
ScreenshotOne is able to handle the backdrop blur filter without issue — so curious what we may be missing in our own setup. Here is what Screenshot one returns for the same published codebase (different page of the form)
I've been able to work around this issue by putting the backdrop blur onto its own layer and positioning it underneath the form content. Same visual effect in the app, plays nicer with the Browser Renderer.
Would still love to know what I could be doing to make the proper blur-on-the-container situation work.