UserAgent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/54.0.2803.0 Safari/537.36

Steps to reproduce the problem:
1. Open Chrome on a Windows system with multiple displays configured with per-monitor DPIs at different levels
2. Resize the browser window on one monitor
3. Move the browser to a monitor with a different DPI and resize the window
4. Observe UI elements overlapping incorrectly

What is the expected behavior?
UI elements should lay out correctly without overlap on all monitors at all different DPI settings.

What went wrong?
Elements overlap / position incorrectly.  See the attached screenshot.   The first image shows a Chrome window freshly opened, with enough New Tab pages open to fill the tab strip.  This is on a high DPI display (Windows scaling set to 200%).

The second image shows the same Chrome window after dragging it to a low DPI display (Windows scaling set to 100%), and resizing the window horizontally.  Notice that the profile selector and the rightmost tabs in the tab strip overlap the window controls (minimize/maximize/close).

Did this work before? N/A 

Chrome version: 54.0.2803.0  Channel: canary
OS Version: 10.0
Flash Version: Shockwave Flash 22.0 r0

In Chrome 52.0.2743.82 stable, UI layout in the non-material UI is similarly broken; except in the opposite direction --- layout is correct on the low DPI display, but on the high DPI display, the profile selector and tab strip edge position too far to the left; too far away from the window controls.
 

Deleted: crbugexample.png 108 KB

	crbugexample.png 108 KB View Download