HTML offsetLeft delays to change

I have four canvas in my screen, positioned two above and two below.

Each one have a button that makes possible to maximize the canvas, hiding the others.

This button is positioned above each canvas, with absolute position based on offsetTop and offsetLeft of the canvas.

However, when I maximize or minimize a canvas, the button formula updates only the width property.

The strange thing is that if I resize the screen, which also calls resize function, everything goes to the right place.

EDIT: Additional information: I am using VueJS and, in order to hide the other canvas, I apply v-show="false" to them parent divs, which only applies display: none.

Some snippets:

Initial resize and listener:

window.onload = function () {
    resizeAll();
    window.addEventListener('resize', resizeAll, false);
};

The resize hub:

function resizeAll () {
    vue.$refs.panelOne.resizeDefault();
    // ...
    vue.$refs.panelN.resizeDefault();
}

The panel’s resize default and resize method. The “expandStyles” is the css styles applied to the button:

resizeDefault() {
        let dimensions;
        if (this.expanded) {
            dimensions = getScreenDimensions();
        } else {
            dimensions = getHalfScreenDimensions();
        }
        this.resize(dimensions.width, dimensions.height);
    }

resize (width, height) {
        this.canvas.width = width;
        this.canvas.height = height;
        this.expandStyles.top = (this.canvas.offsetTop + 10) + 'px';
        this.expandStyles.left = (this.canvas.offsetLeft + this.canvas.width - 40) + 'px';
        drawInterface.redraw();
    }

And finally, the dimension getters:

function getScreenDimensions () {
    return {
        width: window.innerWidth - 310,
        height: window.innerHeight * 0.92
    };
}

function getHalfScreenDimensions () {
    return {
        width: (window.innerWidth - 310) / 2,
        height: (window.innerHeight * 0.92) / 2
    };
}

Answer

I agree with S.P.H.I.N.X , it seems like the problem lies with propagation of reactive properties in this.expandStyles to actual DOM. Would be useful if you can share the part of the template which has your canvases and positioning application.

Meanwhile, if setTimeOut doesn’t feel right to you, you may do things more “Vue-way” by using Vue: nextTick to set order of operations (styles recalculation, redraw).

Advertisement

Answer