CODEWITHSUNDEEP
csstextemojioverlapping
Vedran
Vedran

Reputation: 197

Unicode emoji letter spacing issue

I have an issue showing text with emojis. You can see that the "Test" after the emoji is overlapping the emoji. In search of a CSS that breaks this, I have deleted everything using the inspector but the issue is still visible.

enter image description here

The same code in a simple local HTML file is rendering fine as you can see in the second picture. Is my "localhost" tab still caching some styling or is the issue somewhere else.

enter image description here

The above issue is visible on my external monitor.

If I move the window to my Mac screen it is rendered a bit differently! The "localhost" version is rendered fine but the local HTML file version has a spacing between the emoji and the text after it.

enter image description here enter image description here

I have some errors reported by the inspector but this should not impact this simple code in the "localhost" version. Something strange is going on here and I can't figure out why so if somebody had this issue before and has solved it I'd be very thankful for the explanation.

Upvotes: 1

Views: 1579

Answers (1)

HelixFix
HelixFix

Reputation: 31

It seems to be a bug, there are little tricks to fix it

Trick 1 : https://stackoverflow.com/a/44145771/16547877

Trick 2 : https://bugs.chromium.org/p/chromium/issues/detail?id=1083965#c4

Upvotes: 3

Related Questions