html更改offset,javascript - HTML offsetLeft delays to change - Stack Overflow

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

};

}