290915 2025-04-02 05:50:31 -0700 Details with block-size: 0; and block-size: auto; when :open is not rendered 2025-04-09 09:27:28 -0700 1 1 1 Unclassified WebKit Layout and Rendering Safari 18 iPhone / iPad iOS 18 RESOLVED DUPLICATE 280637 InRadar P2 Normal --- 1 frankykubo webkit-unassigned bfulgham ntim simon.fraser webkit-bug-importer zalan oldest_to_newest 2108154 0 frankykubo 2025-04-02 05:50:31 -0700 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. 2109932 1 webkit-bug-importer 2025-04-09 05:51:13 -0700 <rdar://problem/148902667> 2109956 2 ntim 2025-04-09 09:27:28 -0700 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 ***