👀 Views: 101 💬 Answers: 1 📅 Created: 2025-06-06

html safari ios details summary HTML

I've looked through the documentation and I'm still confused about I'm working with a strange scenario with the `<details>` and `<summary>` elements in my HTML project. They work perfectly in Chrome and Firefox, but on Safari (especially iOS 16), the `<details>` element doesn't expand or collapse as expected. When I tap the `<summary>`, nothing happens. Here's the relevant code snippet that I've implemented: ```html <details> <summary>Click to expand</summary> <p>This is some hidden content.</p> </details> ``` I've tested this implementation on both iOS Simulator and a physical device running iOS 16, and in both cases, the `<details>` element is unresponsive. I've also checked the CSS styles and ensured that there are no conflicting styles that might be preventing the interaction: ```css details { cursor: pointer; } summary { list-style: none; } ``` I even tried toggling the `open` attribute manually using JavaScript to see if that would have any effect: ```javascript const details = document.querySelector('details'); details.addEventListener('click', () => { details.open = !details.open; }); ``` This works fine in other browsers, but the scenario continues specifically in Safari. I've also checked for any console errors, but there aren't any. Is there a known compatibility scenario with `<details>` in Safari, or is there something I'm missing? Any help would be greatly appreciated! How would you solve this?