"Save Image" menu option gets unwanted gray boxing on 2nd monitor

[benhammondmusic]

Describe the bug
Occasionally the screenshots have been coming out with slightly odd results, some or all of the following:

• greyed border
• image distortions, etc.
• legend font is serif on screenshot but should be sans serif like on the real tracker

It's been hard to reproduce, but let's document stuff here as it's found and then address.

Edit: on ben's machine, it seems to only occur:

• when laptop is plugged into a larger monitor
• when the browser is opened on that larger monitor
• in Safari
• on the Vega bar charts or D3 time charts

There is an issue opened on the screenshot package mentioning a conflict when the screenshot content is wrapped in a material ui <Paper> component vre2h/use-react-screenshot#56

Things tried that didn't help:

• exporting as jog instead of png
• wrapping entire card in <Paper>
• removing the MUI provider at the top level
• It's possible this is being caused by the <Backdrop> component that greys out the backdrop and focuses the user on a spinner while the screenshot is thinking.... perhaps on some machines the grayed background is interfering

Example of weirdness

Evan - probably Windows / Edge?