Developer Resources home page link layouts broken in Safari

[Anlino]

On the [Developer Resources home page]​https://developer.wordpress.org, the items beneath the "Documentation" and "API Reference" headings are broken for me in Safari 17.3.1 on desktop for as long as the there are two columns or more on a single row. See the attached image. They appear correctly (with the paragraph visible) in Chrome and Firefox.

[Anlino]

Screenshot of the broken layout in Safari.

[adamwood]

Hi @Anlino thanks for raising this. I can't reproduce with Safari 17.4.1

These groups of links use CSS Grid for layout. As far as I can see your version of Safari should support this. Are you able to open the developer tools and look at the CSS rules? Maybe there are properties which are flagged as not supported, either on the div.wp-block-group or the .wp-block-wporg-link-wrapper elements within.

[Anlino]

Hey @adamwood! None of the properties are marked as unsupported for me, although disabling either grid-auto-rows: 1fr; or container-type: inline-size; on the group, or overflow: hidden; on the link, fixes the layout.

I'm running macOS 14.3.1, so not the latest version of the OS, but the latest version of Safari. I tried disabling the only Safari plugin I have running (1Password) which didn't change anything. Let me know if I can be of any more help!

[ryelle]

I can reproduce this with Safari 17.4.1, and the container-type hint reminds me that I fixed a similar issue ​in the global footer. I think it has to do with "auto" size in a constrained element.

[adamwood]

Ah I'm still on MacOS 13.6.6, maybe that's why I can't repro.

[adamwood]

Fixed in ​https://github.com/WordPress/wporg-parent-2021/commit/76abfe2c2e01f79582501096f8056f07136d1b39