Fixed element as child of `dialog` element wrapped by element with `container-type` is positioned incorrectly

[Fattimo]

Fixed element as child of `dialog` element wrapped by element with `container-type` is positioned incorrectly

[scott-m-sarsfield]

Similar behavior applies when doing anything else to an element that would make it a "containing block" (like adding a transform). The matter is that when inside a dialog element, it should use the html root element for position, since the dialog resets position .

...meanwhile, a possible workaround is to make the dialog a containing element by adding a useless transform style

dialog { transform: translate(0); }

(i'm not terribly aware of other consequences of forcing containing elements though.)

edit: *applies when opened with showModal(), but not show().

[Fattimo]

Similar behavior applies when doing anything else to an element that would make it a "containing block" (like adding a transform). The matter is that when inside a dialog element, it should use the html root element for position, since the dialog resets position.

Probably need to be careful of the non-modal dialog then. I didn't look into it too deeply, but the HTML spec for dialog also supports the .open() function, which is non-top level mode for that html element. So perhaps the relevant check needs to be if the element is top level or not

[atomiks]

As @scott-m-sarsfield pointed out, the logic is to detect if something is a containing block is missing an isTopLayer(element) check while traversing. This a simple change and appears to fix the issue. I'll make a PR shortly