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

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?

Looks like an SVG problem — SVG does not support reflowing text to fit, but you might be able to get close by using ems in the <text> layout attributes, instead of transform to position each line:

<text x="858.2422" y="69.8em" class="st25 st26 st46">
  People are always
  <tspan x="858.2422"  dy="1.5em" class="st25 st26 st46">on the move.</tspan>
</text>

This wouldn’t be a problem if the text was HTML elements, since those do reflow. It looks like the SVG is coming out of Adobe Illustrator, so good luck with that — Illustrator is as good at exporting SVG as Microsoft Word is at exporting HTML.

Hello @Tigt, thanks for the reply! I think you misunderstood what I meant though. If you visit http://mapper.ai then try zooming with ctr-+ or ctrl--, you’ll see that the site seems to remain the same size.

This is because the CSS transform that is applied to the whole site (mostly HTML, not SVG) is proportional to the window CSS size. So when you zoom in, the window size gets smaller because the CSS “pixels” are bigger, so in the end the website looks almost the same.

I’m wondering how to achieve this same thing, but also let the user be able to zoom the whole website.