'Absolute position on <dialog> inconsistent between the Open attribute and showModal() method

I'm experimenting with using a <dialog> element as a menu and I noticed something odd with the absolute positioning. According to MDN you should set the open/closed state on the dialog via the showModal() method and not the open attribute.

When I use showModal() the dialog absolute positions itself incorrectly to the body element. enter image description here

When I toggle the open attribute the dialog correctly absolute positions to the relative positioned parent. It also looks like the ::backdrop is ignored too.

enter image description here

Why?

Tested in Firefox 100 and Chrome 101. I have a feeling I should chock this up to "experimental tech"

htmlcssdialogcss-position


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source

Related Questions