Post

Jonny Dawe
@jonnydawe.github.io

Really swish - do you think the caret disappearing on mobile might be a bit of a usability issue? I’m always hesitant to do too much with hover events because I’m afraid I might break the mobile experience.

Adam Argyle
@nerdy.dev

Mobile benefits from UI feedback too, aka I don't think you should throw out the opportunity. I totally emphasize with the sentiment tho, that non-hover devices get a stickier kind of experience, but it's not blocking and does still provide healthy UI feedback about interaction results in this case

Stuart Langridge
@sil.kryogenix.org

Hmm. I am fully, entirely in agreement with you that details don’t have to look terrible, and this is cool in concept. But… iOS Safari doesn’t like it. It’s not pretty. (Also, scroll is broken, but that might be codepen’s fault.) Maybe this is more “add a workaround for iOS” stuff, as usual.

Adam Argyle
@nerdy.dev

Indeed, Safari is failing in a way I don't understand; it seems nesting related as entire style rules aren't applying. Firefox is good with the nesting though, so I'm feeling inclined to think it's a bug. I assume it's a non-issue if you process your nesting to flat selectors

Arby
@mobalti.bsky.social

This is awesome! Love how the animation really enhances the UX, it makes it so clear to the user what just happened when they open the `<details>` element. Smooth and smart!

Adam Argyle
@nerdy.dev

I see it in Firefox yeah, the grid containment isn't present due to the missing ::details-content pseudo element I should be able to add a supports check and fix it. 1 moment!