text cut off in dropdown nav in Safari 18.2 beta

[alphatownsman]

Describe the issue

Upgrade macOS to 15.2 beta, current public beta 3 (24C5089c), Safari 18.2 (20620.1.16.11.6)

Open https://picocss.com/docs/dropdown#usage-with-nav in Safari

Reproduction URL

https://picocss.com/docs/dropdown#usage-with-nav

Environment

Example: OS, versions, browser details.
macOS 15.2 beta, current public beta 3 (24C5089c), Safari 18.2 (20620.1.16.11.6)

[Yohn]

Does this happen in the latest non beta release?
I don't have a Mac so unfortunately I cannot test this, accept for on my iPhone and the drop down you pointed out is working correctly.

I also don't think we would be supporting beta releases since it's not an official release yet, and things will change before the official release.
But with that said, if you come up with a fix, please let me know by opening a pull request here or in my Pico CSS fork and I'll see about getting it improvised.

[alphatownsman]

@Yohn it seems to be a new issue in recent beta, I just updated iPhone to latest RC release, the issue is the same. Very likely you should be able to see the same bug next week in the final release version.

[Yohn]

@alphatownsman Thanks for the update! I just saw the iOS update is expected on Monday, maybe Tuesday next week so I will update as soon as I see that come out and will look into what could be causing this issue. Its good to have the heads up about it though, so thanks for that. If you have any ideas or possible fixes before the official release that be awesome, but if not its ok. I should be able to find it when I see it.

[Yohn]

@alphatownsman 18.2 is available, I and I can confirm I see this error as well. I looked in to this the other day and have some theories why it could be happening. I'll try to get a fix for this tonight.

[64bitint]

Appears to be caused by this code:

pico/scss/components/_nav.scss

Lines 12 to 16 in 6dc6489

	// Prevent VoiceOver from ignoring list semantics in Safari (opinionated)
	:where(nav li)::before {
	float: left;
	content: "\200B";
	}

Quick fix is to disable it with this css:

:where(nav li)::before {
  float: none;
  content: "";
}

I'm not sure what that does to VoiceOver, but in my limited testing it fixed the text cutoff issue.

[Yohn]

@64bitint Thanks for pointing out what you found! That definitely helped come up with a solution for iOS.

The main fix was to add float:none; like you mentioned, but we also needed to fix the content: "\200B"; line.

After digging I've realized that the content: "\200B"; was getting removed in the compiled css files:

pico/css/pico.css

Lines 2444 to 2447 in 6dc6489

	:where(nav li)::before {
	float: left;
	content: "​";
	}

I found this article on VoiceOver and list-style-type:none that used the same content: "\200B"; line and it mentioned that VoiceOver effect users will not see the navigation list because of list-style-type:none;

At the end the article said:

Adding some pseudo-content before the list item will add the list semantics back to the list, in the most simple case it could be some zero-width space. It could be any pseudo-content, but it definitely needs to be before, not after. Just make sure whatever you add does not get in the way of interacting with the list item.

So I put a space in the content value and fingers crossed this would ensure the VoiceOver effect users will still see the navigation.

  :where(nav li)::before {
    float: none;
    content: " ";
  }

---

To get `\200B` in the compiled CSS:

@use "sass:string"; // must be at the top of the file

  :where(nav li)::before {
    float: none;
    content: string.unquote('"\\200B"');
  }