Remove bloated DIV structure (HYPE_element_container)

Feature Requests
1

When I remove the HYPE_element_container structure using JS… everything still works as expected. Why can't this be the default. What was the use case for keeping them around again?

removeHypeElementContainer.hype.zip (57,0 KB)
Test file with all sorts of stuff happening. All work.

<script >

    /**
     * This function removes the HYPE_element_container from the DOM.
     * @param {HTMLElement} element - The element to remove the container from. As we are using it on HypeDocumentLoad the element will be the root of the document.
     */
    function HypeDocumentLoad(hypeDocument, element, event) {
        let hypeElementContainer = element.querySelector('.HYPE_element_container');
        while (hypeElementContainer) {
            let parent = hypeElementContainer.parentNode;
            let children = hypeElementContainer.children;
            for (let i = children.length - 1; i >= 0; i--) {
                parent.insertBefore(children[i], hypeElementContainer);
            }
            parent.removeChild(hypeElementContainer);
            hypeElementContainer = element.querySelector('.HYPE_element_container');
        }
    }

	if ("HYPE_eventListeners" in window === false) window.HYPE_eventListeners = Array();
	window.HYPE_eventListeners.unshift({type: "HypeDocumentLoad", callback: HypeDocumentLoad});

</script>

Update: Works even on complex layouts… just used it on a nested multi layout project. This really makes me wonder now. Feedback and other opinions welcome…

2 Likes
2

The containers are for 3D rotations to ensure consistent perspective and IIRC it also helped deal with intersection issues. On browsers that don't support 3D transforms like IE 10 and below, they aren't used (which is why the runtime can still work correctly if they don't exist). The plan is to only have them for elements which have 3D rotations in the future to preserve backwards compatibility, though we'll see how that shakes out in testing. I kinda hate them too :slight_smile:.

2 Likes
3

Thanks for the feedback! Great, so, I am probably deploying this in my projects from now on out. Don't need IE10 and having them removed, mitigates many problems related to the stacking context. I'll keep posting my finding and upsides of removing them here. Even for 3D it should probably be better to remove them if one wants to build a cube or layers that clip into each other, but I will have to do some testing for that.

1 Like
4

Any updates if we can get this as an option under document?

1 Like
5

...:+1: