Thanks for the video Jeroen. You're a CSS Magician that lives in the bleeding edge. I saw that If we put the buttons to the bottom right (makes more sense for mobile to me) then there's an overflow problem. If the content of the menu creates an scroll bar, the close button keeps moving with the scroll position. This can be solved by making the close button fixed rather than absolute. And there's no need to play with the overflow properties as is.
Thanks for this video could you make a video on CSS trig functions I've seen ana tudor doing great things on codepen like her " No SVG, no image, CSS-only fluid slider with input"
In dit geval combineer je het met bijv opacity 0 om een fade-in te krijgen. Display none en block hebben zelf geen waardes waartussen ze geanimeerd kunnen worden. Dus als je animeert naar display none, zal de browser op het laatste moment de property naar none zetten. Om dan een animatie te zien moet je zelf nog opacity animeren.
The specs make a distinction which they call “modal” or”non-modal”. A dialog is a modal pop-up, which means that in order to dismiss that, the user _has_ to make an important choice in the dialog before it can be dismissed. The popover is non-dialog, meaning it does not have that restriction. This is also why for example the popover auto closes when you click the backdrop vs a dialog which you need to run a JS method for this to happen. There’s a lot of overlap between the two elements and you can definitely create a non modal with a dialog too. But this is what the docs say is their intended behavior. See here too: developer.mozilla.org/en-US/docs/Web/API/Popover_API#concepts_and_usage
