bug: Inner positioned element stays visable after close

[DavidvandenPol]

When using visibility on a positioned element the element stays visable after closing dialog.

[GrimLink]

@DavidvandenPol after checking the bug as mentioned in your issue the fix not that easy, for a general purpose case.

So I have converted this to a Q/A, and offer the solution here for any inner CSS components that use visibility, in combination with the dialog.

The issue only shows when a visibility: visible; is used inside a visibility: hidden; causing it to show up after closing the dialog.
Since we use this to add animations to the dialog close and open states, this needed here.

To solve this make sure to only set the visibility property for you child element only when hidden, example;

.element:not(.is-open) {
  visibility: hidden;
}

Or use the .dialog-inner and by setting display: none; on it, when the dialog is closed, if the first option can not be used.