search

tailwindlabs / tailwindcss

A utility-first CSS framework for rapid UI development.
https://tailwindcss.com/
MIT License
83.39k stars 4.22k forks source link

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

Open davidmyersdev opened 3 months ago

davidmyersdev commented 3 months ago

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: image

davidmyersdev commented 3 months ago

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: image

thecrypticace commented 3 months ago

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.