Duplicate ellipsis in Safari when using `<sup>` or `<sub>` tags

[davidmyersdev]

What version of Tailwind CSS are you using?

v3.4.10

What build tool (or framework if it abstracts the build tool) are you using?

N/A

What version of Node.js are you using?

N/A

What browser are you using?

Safari

What operating system are you using?

macOS

Reproduction URL

https://play.tailwindcss.com/cUuJcAdOkx

Describe your issue

When loading the above reproduction in Safari, the text is truncated with multiple sets of ellipsis. It appears to be happening due to the position: relative styling of the <sup> and <sub> tags.

Screenshot:

[davidmyersdev]

Here is another reproduction that confirms it's the position: relative style that seems to be causing this. By explicitly using static align-super and static align-sub on the respective tags, the problem goes away.

https://play.tailwindcss.com/uFKc7nv7CV

Screenshot:

[thecrypticace]

Here's a minimal reproduction that doesn't involve Tailwind CSS at all: https://play.tailwindcss.com/IuzZoyB27m

Yeah there's definitely a Safari rendering bug as it looks / works fine in other browsers and even selecting the text can cause one of the ellipses to disappear.

I'll file a bug with webkit some time this week.

[philipp-spiess]

Seems to be fixed in the latest version of Safari for me 🎉