11

The title says it all, but perhaps an image says it better. The blog doesn't display this tweet properly:

Chrome on macOS High Sierra (edit: it's now fixed on this system):

Safari iOS (edit: still not fixed here):

While there's no formatting problem in the actual tweet (on either):

What's happening is that the emoji you see in the macOS screenshot are actually the alt text for an image that isn't displaying (does it have a proper URL, actually?):

<img draggable="false" class="emoji" alt="👩🏾‍🏫" src="&lt;a href='https://s.w.org/images/core/emoji/11/svg/1f469' target='blank'&gt;https://s.w.org/images/core/emoji/11/svg/1f469&lt;/a&gt;-1f3fe-200d-1f3eb.svg">

It's failing with several similar errors such as:

Unsafe attempt to load URL https://zgab33vy595fw5zq-zippykid.netdna-ssl.com/wp-content/themes/stackoverflow/assets/svg/output/symbol-defs.svg from frame with URL https://stackoverflow.blog/2010/05/19/new-automatic-account-association/. Domains, protocols and ports must match.

I don’t know what’s happening on iOS that not even the alt text is working. I do have the right emoji on my system: 👩🏽‍🏫👨🏻‍🏫...

You can probably see this behavior on almost any page on the Stack Overflow Blog, but I saw it here.

7
  • Twitter uses their own emoji, Twemoji while the alt-text is the unicode character of the Emoji. That said, no repro on Chrome 70 (no extension), macOS Mojave
    – Andrew T.
    Commented Dec 4, 2018 at 8:01
  • Could repro here, Chrome 70 @ Win10(x64). The src of each emoji image has a strange value such as <a href='https://s.w.org/images/core/emoji/11/svg/1f469' target='blank'>https://s.w.org/images/core/emoji/11/svg/1f469</a>-1f3fe-200d-1f3eb.svg, or in short: a full <a href=... target=... ></a> tag + some text is used as the src. Not sure if the src is relevant, could also be the &zwj; (zero-width-joiner) in the alt text.
    – Peter B
    Commented Dec 4, 2018 at 8:23
  • 3
    Slightly Off-topic: I'm not against emojis (I just don't use them much) but what purpose do they serve in that Tweet?
    – Script47
    Commented Dec 4, 2018 at 12:37
  • 4
    @Script47 It drives attention to the tweet - basic "millennial" marketing.
    – ㅤㅤㅤ
    Commented Dec 4, 2018 at 13:19
  • 9
    @Script47 Presumably to score progressiveness points. I think the intended message is "Look at us! We even work with women and dark people!". This is pretty normal in modern corporate messaging, of course.
    – Mark Amery
    Commented Dec 4, 2018 at 13:19
  • 6
    @MarkAmery and people fall for this stuff? Honestly, overly using emojis just makes me glance across your message.
    – Script47
    Commented Dec 4, 2018 at 13:28
  • I agree with @PeterB, adornments to Emojis are not always followed. Emojis, may not be directly rendered, but rather replaced by images, which do not follow adornments.
    – user10316640
    Commented Dec 5, 2018 at 3:35

1 Answer 1

1

Twitter is replacing the emojis with images. Stack Overflow is attempting to do the same, but there is a 404 error on the svg files. The unsafe load attempt is a checkerboard pattern(not related to the issue.)

The image requests from s.w.org are improperly formatted.(Appears to be internally redirected improperly, or an external reference applied as a reference address).

The alternate Emojis render with "spaces(broken images)" and monochrome characters, because that is how your browser/system interprets them.

Edit first time emojis on mobile work worse than desktop.

2
  • Strangely enough, I literally just edited my question 10 minutes ago to add how it looks on iOS. It's broken there too and doesn't even show the alt text that I see on my Mac.
    – Laurel
    Commented Dec 5, 2018 at 4:15
  • It seems both Android and IOS fail when rendering. IOS wanting images and Android(5) giving a response similar to the Chrome above.
    – user10316640
    Commented Dec 5, 2018 at 4:28

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .