Weirdly looking breadcrumbs with emoji icon

šŸ›Bugs
1

No scripts/styles attached, FF/Chrome on Mac

without emoji

with emoji

With this change in css:
.DocumentBreadcrumb-delimiter { margin: 0 6px; vertical-align: inherit; display: inline-block; overflow: hidden; }
itā€™s looking good, but I donā€™t know how this will behave in IE/Edge

2

Thanks! Iā€™ll try this CSS and see if it works in IE/Edge.

I remember looking at this bug before, and it was because the emoji character messed up the line height or something.

1 Like
3

In iOS same thing, also the > is mot at th same height

4

It looks like this after applying the CSS (Chrome Win 10):

Did you have other user styles active?

5

No, zero extensions in Chrome incognito mode :scream:

But look how small those icons are in my browser, and your are rendered from top of text, mine from bottom. Browsers are crazy :frowning:

these are computed styles in my .DocumentBreadcrumb-item with emoji

test2.png379Ɨ630 59.4 KB

another way to make this work in my Chrome - remove completely delimiter and:
.DocumentBreadcrumb-item { cursor: pointer; display: inline-block; max-width: 150px; overflow: hidden; text-decoration: none; text-overflow: ellipsis; white-space: nowrap; line-height: 2em; }
.DocumentBreadcrumb-item::before { content: ">"; float: right; padding: 0 10px; }

it needs to be ::before, ::after will be eaten by ellipsis, but with ::before forced to right .DocumentBreadcrumb-item needs to have some line-height applied. Itā€™s a good sign that this was not align correctly without line-height, maybe now it can be tweaked in all setups

6

Using the before pseudo element is smart. Let me see if I can make that work ā€“ less hacking should be requiredā€¦