fix: do not cache devicePixelRatio

[lsh]

Currently we cache the devicePixelRatio on the creation of the renderer and never check to update it again. The problem with this behavior is that zooming in or out of a page will change the devicePixelRatio (which can be observed via window.onresize). In turn, a render will be blurry on zoom. This PR makes us recalculate the devicePixelRatio on resize, which is negligibly expensive.

[domoritz]

Looks good. Is there a unit test we could write for this?

[domoritz]

From Slack @lsh

The caveat is that a user still needs to trigger a re-render whenever a window.onresize event is fired, but we currently don't listen for that event as far as I know

Should we add a listener to window.onresize?

[lsh]

I think that would be valuable, but do we have to worry about how that interacts with react?

[domoritz]

Are you concerned about the global variable or which part? Vega already has a bunch of globals so I don't see any additional concerns. I'd focus on what's best for Vega for now and then worry about compatibility with React.

[tuner]

You could also listen to devicePixelRatio changes using media queries: https://developer.mozilla.org/en-US/docs/Web/API/Window/devicePixelRatio#monitoring_screen_resolution_or_zoom_level_changes

I think this solution would also cover cases where the browser window is dragged from a low-dpi display to a hi-dpi display.

[domoritz]

Needs docs and ts typings but otherwise looks good.