I'm scaling my site based on window size, but this ruins user's zoom


#1

For example, check out http://stage.mapper.ai. If you resize your window, you’ll see that the size of things (f.e. the menu) scales up or down. It uses transform:scale() to achieve the affect. But, if you try to zoom (f.e. pressing ctrl-+/-) you’ll notice that this changes the window size, and therefore scale my size in the opposite direction of the user zoom.

So, the only way to zoom as a user is to modify the font setting, which affects all sites.

Inspect the div#root element to see the transform applied as you resize your window.

Any thoughts on how to allow zoom to work? Should I add a UI component that lets the user scale the root font size as a workaround?