It seems that the current situation is not feasible at this time.
I am working on an animation that requires an element to move from an absolute position to an inline one. The challenge is that I cannot predict how the container or the element itself will be sized.
The main thing I need to figure out is what the size of the HTML Element will be after the transformation, without any flickering or jittery effects.
This task becomes very complex (and perhaps impossible) because I have no way of knowing whether adding the element will resize the parent container or change the size of the element itself.
In essence, what I need is a tool that allows me to see into the future.
const byId = (id) => document.getElementById(id);#container {
height: 3em;
min-width: 50%;
background: teal;
}
#mystery {
background: purple;
}<div id="container">
<div id="mystery">Some Text</div>
</div>
<button onClick='byId("mystery").style.position = "relative"'>Position Relative</button>
<button onClick='byId("mystery").style.position = "absolute"'>Position Absolute</button>Currently, these are the only solutions I can think of (and they're all quite ridiculous):
Create a duplicate of the entire webpage HTML with
opacity: 0; pointer-events: none, then render the future secretly on the clone.Capture the painting data of the current page (essentially taking a screenshot), overlay that while making secret modifications to the page to see the future result, then revert back and remove the overlay.
Similar to number 2, is there a way to ❄️freeze❄️ rendering of a page for 3-4 frames?
I vaguely remember hearing about something called a "sizing worker" a long time ago. I couldn't find any information on it now, but it might prove useful in this scenario?