RESOLVED DUPLICATE of bug 280637290915
Details with block-size: 0; and block-size: auto; when :open is not rendered
https://bugs.webkit.org/show_bug.cgi?id=290915
Summary Details with block-size: 0; and block-size: auto; when :open is not rendered
frankykubo
Reported 2025-04-02 05:50:31 PDT
Overview: I am using details element with summary inside to render accordions. Since iOS 18.4 update, this does not work either in Chrome, or Safari in iPhone. Works okay on android, desktop devices and iPhone 18.3.x iOS devices. Steps to Reproduce: 1. Use this HTML: ```html <details name="faq"> <summary> Summary </summary> <div> DETAIL CONTENTS </div> </details> ``` 2. Use this CSS: ```css @supports(transition-behavior: allow-discrete) { details::details-content { block-size: 0; transition: block-size 0.5s, content-visibility 0.5s; transition-behavior: allow-discrete; } details:open::details-content { block-size: auto; } } ``` 3. Try to open the details element. Expected Results: Details element gets [open] attribute and contents are rendered Actual results: Details element gets [open] attribute, contents are not rendered.
Attachments
Radar WebKit Bug Importer
Comment 1 2025-04-09 05:51:13 PDT
Tim Nguyen (:ntim)
Comment 2 2025-04-09 09:27:28 PDT
WebKit doesn't support `:open` currently. You can just replace `details:open::details-content` with `details[open]::details-content` and your code should work. *** This bug has been marked as a duplicate of bug 280637 ***
Note You need to log in before you can comment on or make changes to this bug.