Can’t expand html sections in API Design Guidelines

perhaps this is just (me or) firefox being dumb, but i can’t seem to expand any of the sections in the API Design Guidelines:

only the Expand all details now button at the top works.

on inspecting the HTML, it appears that the <input type="checkbox" class="detail"> elements are there, but they have zero height.

1 Like

It’s working for me on iOS Safari—could be a browser or browser extension issue?

I tried both Safari and Chrome on macOS and they both show the More Detail links with disclosure triangles.

i tried opening the page in 1) a private window, and 2) restarting firefox with extensions disabled (“safe mode”), and i still cannot see any controls to expand the sections individually.

i’m on ubuntu 22.04.1, and i’m using firefox 107.0. so maybe this is only on ubuntu firefox.

This also happens in Firefox for macOS 107.0

The checkboxes have zero height because the "More Detail" content is in ::before and ::after pseudo elements. According to Stack Overflow Firefox does not support pseudo elements on input tags without changing the element appearance.

On my machine, adding -moz-apperance: none; to article input.detail[type="checkbox"] allows pseudo elements to appear. Note when using the developer tools Firefox does not re-render the pseudo elements until their content is updated (like clicking Expand/Collapse all details now).

3 Likes

Thanks, @taylorswift for reporting this issue!

@barnard-b feel free to open a PR on GitHub - apple/swift-org-website: Swift.org website if your solution works. Would be appreciated. :slightly_smiling_face:

1 Like

@alexandersandberg

3 Likes

The fix is now live. Thanks, @barnard-b! :partying_face:

1 Like