Bug 290915 – Details with block-size: 0; and block-size: auto; when :open is not rendered

• Component: Layout and Rendering
• Status: RESOLVED DUPLICATE

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.

[Radar WebKit Bug Importer]

<rdar://problem/148902667>

[Tim Nguyen (:ntim)]

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 ***