Keeping a UI element at a constant size when scaling the parent

I am creating an “infinite canvas” system, I have it setup so that there is a grid that will always repeat by snapping back to the center(shown in snapping grid). The problem is that I also want to be able to zoom in, which I accomplish by scaling the parent of all of the content including the grid. When I scale it, the grid is scaled too and eventually it isn’t big enough to cover the entire canvas (shown in scaling without my sizing script). I created a script that will change the size delta of the rect transform so that the grid always covers more than needed so you can’t see edges (shown in scaling with sizing script). This is where I have a new problem, because now the grid scales from the bottom left corner, so it looks like the grid is moving up and to the right (shown in scaling with sizing script).

Does anybody have any ideas on how I can scale the grid but also make sure it is never too small to cover the entire screen?

7947103--1017181--Snapping grid.gif
7947103--1017184--Scaling without my resizing script.gif
7947103--1017190--Scaling with sizing script.gif

Try something like: rect_transform.localScale = 1 / rect_transform.lossyScale;
LossyScale will account for all parent scales, if just want to invert some previous scale, try 1/ the previous scale.
By 1/Vector3 i mean, new Vector3(1/x, 1/y, 1/z).

I want the scale to change on the grid, but I need the rect to stay large enough to cover the entire screen, so what I do is increase the sizedelta of the rect transform by the original size divided by scale.

rectTransform.sizeDelta = originalSize/currentscale

You can see what this does in the gif called scaling with sizing script. in the editor window, you can see that the rect stays the same size, but the actual sprite “zooms” in and out. i.e. the scale changes. That is what I want, the problem is that no matter where I set the anchor and pivot points, it seems to always scale from the bottom left corner.

It seems like that is just how modifying the size delta behaves, so I wasn’t sure if there is another way to do it, or a way to change the point it scales from.

Three suggestions:

  1. Use a static RawImage filling the whole rectangle, with the “grid” texture on wrap: repeat and update the uvRect to reflect zoom and movement.

  2. Make a specific shader for it, calculate everything in it, feed the map texture or even generate map (if its procedural).

  3. Camera and RenderTexture, rendering on a different layer (disable that layer on other cameras). You can move the camera for zoom and movement. Grid and map stays static, you only need to move the camera (which is just a transform anyway).
    Or instead keep the camera static and move a pivot object moving the grid and the maps quads.