Opened 3 months ago

Closed 2 months ago

#7557 closed defect (bug) (fixed)

Developer Resources home page link layouts broken in Safari

Reported by: anlino's profile Anlino Owned by:
Milestone: Priority: normal
Component: Developer Hub Keywords:


On the [Developer Resources home page], 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.

Attachments (1)

Skärmavbild 2024-04-05 kl. 10.20.42.png (94.6 KB) - added by Anlino 3 months ago.
Screenshot of the broken layout in Safari.

Download all attachments as: .zip

Change History (6)

3 months ago

Screenshot of the broken layout in Safari.

#1 @adamwood
2 months ago

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.

#2 @Anlino
2 months ago

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!

#3 @ryelle
2 months ago

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.

#4 @adamwood
2 months ago

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

Note: See TracTickets for help on using tickets.