1

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.

Vedran
  • 177
  • 2
  • 9

1 Answers1

3

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

HelixFix
  • 31
  • 2
  • The only issue with adding a margin with media query is that my emoji is not wrapped with an element I can target. But yes... it definitely looks like a bug. Thanks for the links. – Vedran Jul 28 '21 at 18:50