Incorrect UI rendering when moving between displays with different DPI scaling

I have noticed at least on mac if i open a trace and then drag the browser window to a monitor with higher DPI setting then the trace view renders incorrectly. only workarounds i've found when this happens are moving the window back to the original monitor, or refreshing the page, or resizing the chrome window.

example of what this looks like:

# How to reproduce (with multiple monitors)

1. Setup a Mac with two displays each with different DPI scaling settings enabled. (using a macbook internal display + external display should work so long as they have different DPI scaling settings, but was not tested)
2. open a Chrome window on the display with lower DPI
3. navigate to ui.perfetto.dev
4. open the example android trace
5. once the trace loads drag the window to the other monitor
6. observe incorrect timeline rendering as seen in the screenshot above.

# Alternate way to reproduce with a single monitor

1. From Mac display settings select "Show list":


2. Find a resolution that has a both high and low resolution. select the one labeled "low resolution":
3. open Chrome tab with ui.perfetto.dev.
4. load the Example android trace.
5. Go back to display settings and select the same resolution, but not labeled as low to set display to higher DPI scaling

6. navigate back to the chrome window and observe incorrectly scaled UI components.

Start at ui.perfetto.dev and reproduce the issue in Chrome using the example Android trace, first across displays with different DPI scaling and then with the alternate single-monitor setup. Trace the UI rendering path involved in the timeline and verify that moving between scaling modes no longer produces incorrect rendering or requires refreshing or resizing the window.

Written by the indexing model from the issue text.