I have an element which I call back covered by another element which I callfront.
Back is set in CSS to change color on hover. Front is set, when hovered, to disappear after a 1s delay and the mouse pointer which was onFront element now is on back element.
Front disappears by setting height : 0 in JavaScript. AfterFront disappears and the mouse pointer is hovering onBack the browser doesn't rerender the hover effect onBack which results in its color not being changed as it should.
When I try the same example by naturally removing Front from the DOM it works fine. My app, though, requires I do this by settingheight : 0.
You can try it for yourselves in the following examples. You will see a red box and a blue box. Red isFront and blue is Back. When you move the mouse pointer to the red box, the red box's color changes togreen. When you move your mouse onto the blue box, after one second, it will disappear.
The point of the example is to show that after the blue box disappears, the mouse pointer now hovers on the red box and it should therefore becomegreen.
Is there any way to force browser to rerender?
The problem persists in Google Chrome and Microsoft Edge. Firefox works good.