🏠 back to Observable

Screenshot node trouble?

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: