Closed perpil closed 8 months ago
Attached a minimal repro. If you load index.html
in FF and click domToPng, it should fail: repro.tar.gz
I was playing with this some more today and noticed 2 things:
modernScreenshot.domToPng
doesn't reject on failure, it just generates a valid but empty png file. Is this the expected behavior, is there anyway to know if the operation failed?I'm going to resolve this, I was able to use the includeStyleProperties
in 4.4.36 to filter the styles and it is smoking fast and not bloated š
I apologize for not being able to provide a repro via playground. I'm trying to take screenshots in the AWS Console of a relatively straight-foward
svg
within adiv
. It appears that modern-screenshot is embedding the full css multiple times into the resulting image making it too large for firefox to render. It is directly related to the number of lines in the svg, it will render fine with a few lines, but when there are more than 20 lines or so, the image it tries to render with css exceeds 30 MB and starts to fail.The code I'm screenshotting looks like this:
And visually it looks like this:
I've attached the gzipped img that modern-screenshot creates that firefox chokes on because it is too big. modern-screenshot.txt.gz I've also attached the main stylesheet from the AWS console that appears multiple times in the rendered image. styles.css.gz
There are probably a couple of ways to fix this:
Let me know if I can provide more info or help!
Steps To Reproduce
Using Cloudwatch Insights in AWS i.e. https://us-west-2.console.aws.amazon.com/cloudwatch/home?region=us-west-2#logsV2:logs-insights
Select a log file that has at least 50 lines at different timestamps and run a query like.
limit 100
to display a histogram of the logs.Take a screenshot using
domToPng
on the div with classlogs__histogram
Error Message & Stack Trace
```txt Log message ``` [modern-screenshot] Failed image load data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221082%22%20height%3D%2294.75%22%20viewBox%3D%220%200%201082%2094.75%22%3E%3Cstyle%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxhtml%22%3E%0A.______background-clip--text%20%7B%0A%20%20background-clip%3A%20text%3B%0A%20%20-webkit-background-clip%3A%20text%3B%0A%7D%0A%40font-face%20%7B%20font-family%3A%20%22Amazon%20Ember%22%3B%20src%3A%20url(%22data%3Aapplication%2Fx-font-woff%3Bbase64%2Cd09GRgABAAAAAEbsABAAAAAAiagAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAABbAAAABwAAAAcbjn2yEdERUYAAAGIAAAAMwAAADgFFwODR1BPUwAAAbwAAAw5AAAmVDGI9a5HU1VCAAAN%2BAAABNIAAAsi%2B2GWR09TLzIAABLMAAAAXQAAAGCIbG6MY21hcAAAEywAAAIRAAADDi4Vrc1nYXNwAAAVQAAAAAgAAAAIAAAAEGdseWYAABVIAAAl4AAAPiTZSEt1aGVhZAAAOygAAAA0AAAANgj8ZOJoaGVhAAA7XAAAACEAAAAkCA0ExmhtdHgAADuAAAACyAAABRyyMDbRbG9jYQAAPkgAAAJpAAACnivTHIRtYXhwAABAtAAAAB0AAAAgAV4Ao25hbWUAAEDUAAABvwAABKxfvqgQcG9zdAAAQpQAAAROAAAIR7QPcfl3ZWJmAABG5AAAAAYAAAAGXvJWqgAAAAEAAAAAzD2iā¦ error { target: img, isTrusted: true, srcElement: img, eventPhase: 0, bubbles: false, cancelable: false, returnValue: true, defaultPrevented: false, composed: false, timeStamp: 47642, ā¦ } ā bubbles: false ā cancelBubble: false ā cancelable: false ā composed: false ā currentTarget: null ā defaultPrevented: false ā eventPhase: 0 ā explicitOriginalTarget:
ā
isTrusted: true
ā
originalTarget:
ā
returnValue: true
ā
srcElement:
ā
target:
ā
timeStamp: 47642
ā
type: "error"
ā
: function isTrusted()
ā
: EventPrototype { composedPath: composedPath(), stopPropagation: stopPropagation(), stopImmediatePropagation: stopImmediatePropagation(), ā¦ }
Your Environment