Recently, I can’t screenshot the SVG nodes on Observable with the browser’s developer tool.
The images are on wrong coordination or broken layout.
I tried on Firefox and Chrome.
Does anyone experience that?
Can you link the notebook and attach an example screenshot?
Hm yeah, like when I do “Capture node screenshot” on @d3/force-directed-graph, like this:
…this is the resulting screenshot:
…which doesn’t just capture the SVG node in question. Is that what you mean? I haven’t known about that Chrome functionality for very long, so I don’t know if it used to work.
1 Like
Thank you. Yes, I got like that exactly.
I often use the function even I know the image export function on Observable.
It was functional last week, but I got this error today.
So I guessed the cause isn’t the browsers…
I’ll look into it. It’s a great feature and more flexible than the cell-level “Download PNG”, so I’m sorry it’s broken!
1 Like
@tophtucker That’s not really an error though. Triggering the screenshot hides the scrollbar, which in turn changes the notebook width. The chart cell references width, which is why taking a screenshot restarts the simulation.
1 Like
oh lol great point. though i think the more general problem is that it’s not cropped to the bounding box of the svg that i had selected in the chrome inspector. it cuts off the bottom right, and it shouldn’t include the markdown intro or metadata header at all
Ah sorry, I missed that part. The “good” news is that it appears to be a Chrome bug:
https://bugs.chromium.org/p/chromium/issues/detail?id=1111398
The bad (worse?) news is that Firefox doesn’t fare any better, but I haven’t found a bug report yet.
For the record, I also tried responsive mode / mobile preview in both browsers, and print preview in Chrome.
Edit: There may be more to this, because even capturing a node in the parent frame somehow causes the whole layout to rebuild:
