Menu borked on OSX Safari

Hi there!

Could you please share the URL of your site so we can have a look at what’s going on? A screenshot would also be great in case we can’t reproduce it. You can use an online tool for that (such as https://snipboard.io/) and paste the link into your reply.
Also, what Safari version, and what OS do you use?

Hey! You can check it out at ethostekst dot no (I’ve hardly done any work on it yet). Here’s one snippet of how it should be (and is on every other browser), and one where i use Safari. Weird thing is that I’m using Safari 14 @ Big Sur 11.0, so it shouldn’t be terribly outdated either.

https://snipboard.io/T7AK2Z.jpg

https://snipboard.io/qtL5TK.jpg

Hello there,

Many thanks the for screenshots there – interestingly I can’t see the same thing happening on Chrome, but that’s not to say it’s not happening.

Can you tell me if you’re using any browser extensions, like ad blockers please?

The reason being is that browser extensions can affect how a site performs.

Many thanks.

Indeed. It works perfectly on both Chrome and Firefox.

No extensions – just plain old Safari 14.0.1.

I’ve tested in Safari current and don’t see the issue there. But it looks like maybe Safari 14.0.x was missing some aspects of flex support, which that menu uses. I’ll get an issue filed.

But in the meantime, you could probably correct it with a little padding if you don’t mind having extra space on other browsers. Try adding this to your Additional CSS. Adjust the padding as needed so it looks fine in both browsers:

.wp-block-navigation ul li {
padding-left: 2em;
}
.wp-block-navigation ul li ul li {
padding-left: 0;
}

I don’t have that version of Safari for testing, so let us know if that does the trick. Thanks!

Thanks for all the help –?and the quick fix. I decided to just update my Mac to Monterey, and the problem is indeed not there in Safari 15.

There is another related one, however, and I’ll pivot this thread to that. This problem, or rather slight annoyance, is also not present in Chrome, but is there in both Safari 15 and mobile Safari.

Instead of just highlighting the button I click, it also highlights the entire Gutenberg block (?). So instead of looking like this:

https://snipboard.io/lBXMxT.jpg (CHROME)

it looks like this:

https://snipboard.io/ucgfxy.jpg (SAFARI)

Definitely not an important problem, but certainly not optimal either. Is there a quick fix for this?

Hi @lonelylittleman,

The menu outline appears to be an accessibility feature with Blockbase to provide visual keyboard focus highlighting in navigation menus. In this case, Safari displays an outline around the entire navigation block.

While this likely is a feature, I have opened this issue to look into the matter further: https://github.com/Automattic/wp-calypso/issues/60224

I hope that helps!

Hi there. I was going to file a bug report, but looks like this might already be known, and I know it’s better to continue with an existing thread than start a new one. I do have a bit of info to share though that may help with troubleshooting the problem.

I’m just learning WordPress, so I’m still new to this. But I can confirm that the problem exists in Safari 14.0.2 (what I’m using). And even though I can update Safari myself, I can’t release a web site to the public, many of whom might be using the same version of Safari, if the problem isn’t fixed.

I noticed the problem when trying to use the new Twenty Twenty Two theme (and indeed, the sample web page at 2022.wordpress.net has the menu items all smushed together – no padding between them at all, so it’s not just my installation). But I found that in the template parts editor, if I edited the background color of the navigation block to any color at all, replacing the theme default, everything pads out nicely. But then, I’d prefer to use the theme default of transparent – is there a way to specify a custom color that happens to be transparent? I’ve seen screen snapshots that the color picker is supposed to have a transparency slider, but mine doesn’t.

I’m running WordPress 5.9 and it’s telling me there are no updates available, for WordPress, plugins, or themes.

I could try using the CSS hack as mentioned in this thread, but as I’m said I’m new to WordPress – is there a web interface to editing the CSS, or is it a matter of editing the files in place on the server?

Thanks!

Dan

Hi Dan,

It turns out the menu issue isn’t with Blockbase at all, but with Gutenberg itself. That’s why you’re seeing it in Twenty Twenty-Two as well.

WordPress only support the two most recent versions of any browser, so for Safari that’s up to 14.1, and it looks like in Safari 14.1 this isn’t an issue any more. That means it’s unlikely that the issue will be fixed for Safari 14.0.1 and older. You can see more details here:

https://github.com/WordPress/gutenberg/issues/37673

And even though I can update Safari myself, I can’t release a web site to the public, many of whom might be using the same version of Safari, if the problem isn’t fixed.

There are always going to be people who aren’t on the most recent version of a browser, whether they’re deliberately deciding to not update for some reason, or they’re restricted by hardware/an operating system that’s too old to update to the newest version. Most websites try to ensure backwards compatibility for older browsers, but that’s practical only up to a point, and for WordPress that point is the two most recent major versions. We follow that same guideline for all Automattic themes.

I’ve seen screen snapshots that the color picker is supposed to have a transparency slider, but mine doesn’t.

That’s not available yet, but it looks like it’s being worked on in https://github.com/WordPress/gutenberg/issues/34637

I could try using the CSS hack as mentioned in this thread, but as I’m said I’m new to WordPress – is there a web interface to editing the CSS, or is it a matter of editing the files in place on the server?

There should be an “Additional CSS” option under Appearance in the dashboard. You can go there to add CSS code to your theme without needing to modify theme files directly.

(Modifying theme files directly is not recommended, as any changes you make that way will be lost the next time the theme updates. For changes that can’t be made using CSS alone, the recommended method is to create a child theme instead. But the hope with the site editor is that even this wouldn’t be necessary any more – that you’ll be able to make most customizations directly in the editor. It’s not quite there yet, but the Core team are making improvements daily ?? )