Kevin Powell - Community•3w ago

Object shift in very large font sizes

Hey, I have made a "simple" navigation map in pure html/js/css (runs with golang and htmx in the background, but that should not change anything). You can drag with your mouse and zoom with your mousewheel just like in a maps-program. The calculations and the js shouldn't be of concern here, the only part I think is the crucial one is this css:

        navigation-map {
            display: block;
            touch-action: none;
            overflow: clip;
            position: relative;
        }

        navigation-map > navigation-node {
            position: absolute;
            translate: 50cqw 50cqh;
            left: round(calc(
                calc(
                    calc(var(--map-x) + var(--node-x)) * 
                    var(--map-zoom))
                * 1px), 1px);
            top: round(calc(
                calc(
                    calc(var(--map-y) + var(--node-y)) * 
                    var(--map-zoom))
                * 1px), 1px);
            font-size: calc(var(--map-zoom) * 1rem);
        }

        navigation-map {
            display: block;
            touch-action: none;
            overflow: clip;
            position: relative;
        }

        navigation-map > navigation-node {
            position: absolute;
            translate: 50cqw 50cqh;
            left: round(calc(
                calc(
                    calc(var(--map-x) + var(--node-x)) * 
                    var(--map-zoom))
                * 1px), 1px);
            top: round(calc(
                calc(
                    calc(var(--map-y) + var(--node-y)) * 
                    var(--map-zoom))
                * 1px), 1px);
            font-size: calc(var(--map-zoom) * 1rem);
        }

the --map-x and --map-y are the position of the user and the --map-zoom is the current zoom. How they are set shouldn't be important, just assume they are correct. The --node-x and --node-y are the position of the node that never changes while navigating. Now to my problem. When I zoom in far enough in on a Node, there comes a point where the node suddenly moves to the left. It seems like it hits some sort of border and thus the css gets all messed up. But I can't figure out what causes this. I have provided a html file with the whole code since it is not that long so you can play around with it. I hope this doesn't go against any TOS, I have read the rules and have found nothing, so it should be fine. Any help is appreciated

Ke8jsGT.html

1 Reply

murmelgrumpfOP•3w ago

oh and one thing, I use web components. You can assume navigation-map and navigation-node have no special properties except for the automatic calculation of --map-x, --map-y and --map-zoom

Gaming

Programming

Object shift in very large font sizes