CODEWITHSUNDEEP
htmlcssunicodeiconsemoji
cltsang
cltsang

Reputation: 1829

Large emoji is cut off on chrome and mobile browsers

I am trying to display some large emojis with unicode in HTML or CSS.
However, in Chrome, the lower part of some emojis are cut off, while others are displayed just fine.
It also couldn't render in mobile Firefox on Android.

Example of working emoji: ☀

Example of non-working emoji: 🌝

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <style>
    body {
      margin: 0;
      background-color: #fff;
    }
    p {
      font-size: 20em;
      margin: 0;
    }
  </style>
</head>
<body>
  <p>&#x1F31D;</p>
  <p>&#x2600;</p>
</body>
</html>

minimal codepen example:
Thanks.

Upvotes: 2

Views: 782

Answers (1)

kukkuz
kukkuz

Reputation: 42362

There is a bug reported in Chromium bug tracker - Color glyphs have a 256pt limit

We cache the "correct" version of color glyphs (as we do for alpha masks), but in both cases we have a size limit for the cache (i.e. 256pt).

In the case of non-color glyphs, we fall back on draw-as-path for larger sizes. We don't have such a fallback for color glyphs :(

In my Windows 10 system Chrome Version 69.0.3497.92 (Official Build) (64-bit), above font-size of 216px, the icon with color breaks.

Related issue: https://bugs.chromium.org/p/chromium/issues/detail?id=625191

Similar SO issue: Why do emoji not render above a certain size in Chrome?

Upvotes: 3

Related Questions