{
  "$type": "site.standard.document",
  "bskyPostRef": {
    "cid": "bafyreicj6khucpheamy7quxbv5yyptp4bnfqog4xrlsnja5tasulqx5ev4",
    "uri": "at://did:plc:kmwems6tpvudwvlxisswue6a/app.bsky.feed.post/3mlf3tzek36w2"
  },
  "coverImage": {
    "$type": "blob",
    "ref": {
      "$link": "bafkreig65y22urn6eemgrmgui5in6wnpukkikufolitgfwyw6bpxjvhpyi"
    },
    "mimeType": "image/jpeg",
    "size": 15540
  },
  "path": "/2026/05/08/popover-backdrop-anti-pattern",
  "publishedAt": "2026-05-08T00:00:00.000Z",
  "site": "https://remysharp.com",
  "textContent": "After attending recent conferences and learning that I can swap out buckets of JavaScript for the HTML native popover property, I've been using it liberally throughout my own projects. For little pop out menus it's perfect. Then I also started using it for modal boxes (yes, you might be thinking ahead of me: dialog, still, let's find out what happened). The popover property was really easy for this, and the ::backdrop selector was perfect for adding a little backdrop blur to tell my user \"this is the thing you're dealing with\". I especially love that all the UX around dismissing is handled for me. I can hit the escape key, or click outside the popover and it's dismissed. Except, I kept noticing that when I dismissed my popover it would sometimes vanish then immediately pop back to life…",
  "title": "A popover backdrop anti-pattern [blog]"
}