Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[BUG] Inconsistent emojis #181

Open
VeckoTheGecko opened this issue May 14, 2023 · 1 comment
Open

[BUG] Inconsistent emojis #181

VeckoTheGecko opened this issue May 14, 2023 · 1 comment
Labels
bug Something on the website isn't working good first issue Good for new developers help wanted Extra attention is needed 🔴low priority A low priority feature

Comments

@VeckoTheGecko
Copy link
Collaborator

Describe the bug
Emojis on the website are a mix of Twemoji emojis and default (platform specific) emojis.

image

It would be good to make all the emojis Twemoji for consistency.

I'm not entirely sure the source of the problem. It could be that emojis are only replaced with the Twemoji images on initial page load, and that for some reason doesn't capture all the emojis.

<script>
import { base } from "$app/paths";
import { github_url, climate_town_url } from "$lib/constants";
import { onMount } from "svelte";
onMount(() => twemoji.parse(document.body));
import "../app.css";
</script>
<svelte:head>
<title>Climate Town Knowledge Hub</title>
<!-- Emoji support with Twemoji https://github.com/twitter/twemoji -->
<script
src="https://twemoji.maxcdn.com/v/latest/twemoji.min.js"
crossorigin="anonymous"
></script>
</svelte:head>

@VeckoTheGecko VeckoTheGecko added bug Something on the website isn't working good first issue Good for new developers help wanted Extra attention is needed 🔴low priority A low priority feature labels May 14, 2023
@liamlaverty
Copy link

I took a quick look at this today, and I get strange results in Firefox and Edge. The first time I loaded the page, I had Twemoji on the left menu, but device emoji the Filter section. Then, after making no changes, I get Twemoji on all emoji on the visible page (see image 1).

Details that might help anyone else returning to this issue:

  • There's a flash-of-unstyled-emoji when the page loads, initially emoji are shown, then Twemoji are loaded
  • twemoji.parse(document.body) is called once onMount
  • The cards further down the page are lazy-loaded, meaning they're never changed by onMount(() => twemoji.parse(document.body)); (consider updating to run the parse on lazyload?)
  • When editing the site, moving an element around the page (for example <FilterForm being moved to the end of the resources page) causes the element to load device emoji on the first reload, then twemoji on any subsequent reloads (even if the subsequent reload was on another browser, or in a new private browsing window)

Image 1: above the fold twemoji are rendered:
image

Image 2: on lazy loaded content, device emoji are rendered:
image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something on the website isn't working good first issue Good for new developers help wanted Extra attention is needed 🔴low priority A low priority feature
Projects
None yet
Development

No branches or pull requests

2 participants