Navigation block: Item spacing wrong.

[spacedmonkey]

Description

Item spacing between navigation links is in correct. It seems to be an issue with flexbox css.

Step-by-step reproduction instructions

1. Activate block theme.
2. Create navigation block with links.
3. Save.
4. View in Safari 13.1.2

Screenshots, screen recording, code snippet

Safari 13.1.2

Safari 15.1

Environment info

• WordPress 5.8.2
• Gutenberg 12.1
• Safari 13.1.2

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes

[chthonic-ds]

This is most likely due to gap for flexbox only having support in Safari since 14.1: https://webkit.org/blog/11648/new-webkit-features-in-safari-14-1/.

The Navigation block currently uses gap with flexbox to manage horizontal spacing between items: https://github.com/WordPress/gutenberg/blob/trunk/packages/block-library/src/navigation/style.scss#L303-L325

[tellthemachines]

Hmm, we only support the last two Safari versions, so as long as it works in 14.1 and 15.1 we shouldn't have to fix it. Has anyone tested in 14.1?

[supernovia]

Safari 14.1 should work. It's anything older than that (thinking of folks like my mom with her old iPad) that will have problems.

This was fixed in 14.1:
https://css-tricks.com/safari-14-1-adds-support-for-flexbox-gaps/

But if there's a way to fall back and add spacing if the browser doesn't support it, that'd be nice.

[mrfoxtalbot]

Thank you for the report @spacedmonkey and thank you for connecting the dots here @supernovia

This was fixed in 14.1:
https://css-tricks.com/safari-14-1-adds-support-for-flexbox-gaps/

I can no longer reproduce this either. Spacing appears to be working just fine in Safari. I am going to close this.