Some elements don't increase stack height
OrionReed opened this issue · 3 comments
Elements like <a> and <i> tags don't appear to have any effect on stack height. This is troublesome because there could be others too. Understanding why this is happening would improve confidence in the rest of the DOM view being accurate.
Note how the tags inside the paragraph here are styled lighter (indicating deeper nesting in the DOM) but do not increase depth.
I experimented a bit and it turns out that any element with 'display: inline' is causing this issue.
Usually, inline elements are 'span' 'i' 'strong' 'a' so they are problematic by default, but you can fix it without breaking most of the things by just applying 'inline-block'.
As you can see in the image any elements which are children of display inline will lay flat.
I am still trying to understand how the script works so I won't write a fix at least for now.
This is great, lead me to some of the transforms spec which notes:
A transformable element is an element in one of these categories:
- all elements whose layout is governed by the CSS box model except for non-replaced inline boxes, table-column boxes, and table-column-group boxes [CSS2],
- all SVG paint server elements, the clipPath element and SVG renderable elements with the exception of any descendant element of text content elements [SVG2].
Which means the ultimate question becomes:
- Can we robustly change these elements such that they can be transformed without affecting the layout/styling as viewed from the Z direction (as in, the normal view)
But short term, I'm wondering what mitigation strategies there are, doing something like display: displayCurrent === "inline" ? "inline-block" : displayCurrent might make some headway, but this requires a call to window.getComputedStyle(node) which is incredibly expensive to do for every node.
According to this list of elements that are inline by default
https://www.w3schools.com/html/html_blocks.asp
you can use this style
a, abbr, acronym, b, bdo, big, br, button, cite, code, dfn, em, i, img, input, kbd, label, map, object, output, q, samp, script, select, small, span, strong, sub, sup, textarea, time, tt, var, {
display: inline-block important;
}
I think that if person specifically set something to be inline it should be kept inline, but for elements inline by default this should work