1 reply

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

--map-x

and

--map-y

--map-y

are the position of the user and the

--map-zoom

--map-zoom

is the current zoom. How they are set shouldn't be important, just assume they are correct. The

--node-x

--node-x

and

--node-y

--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.html17.27KB

KP-C

Kevin Powell - Community•17mo ago•

1 reply

murmelgrumpf

Object shift in very large font sizes

        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

--map-x

and

--map-y

--map-y

are the position of the user and the

--map-zoom

--map-zoom

is the current zoom. How they are set shouldn't be important, just assume they are correct. The

--node-x

--node-x

and

--node-y

--node-y

Ke8jsGT.html17.27KB

Object shift in very large font sizes

Object shift in very large font sizes

Similar Threads

Similar Threads

Similar Threads