Modernizr: Emoji test produces false negative in Firefox 41.0 on OS X 10.10

Created on 28 Sep 2015 · 9Comments · Source: Modernizr/Modernizr

The Emoji test is producing a false negative in the Firefox stable on OSX 10.10.

Test case: https://jsbin.com/vuseci/edit?html,css,js,output
(uses https://modernizr.com/download/?canvas-canvastext-emoji-dontmin-setclasses)

Reduced: https://jsbin.com/caniva/edit?html,js,output

Source

peterwilsoncc

All 9 comments

thanks for the report!

just to clarify, are you seeing this?

patrickkettner on 28 Sep 2015

I am, yes.

After I logged this, rmmcue added some progress he made on the WP tracker

https://core.trac.wordpress.org/ticket/34049

Sent from my mobile phone

On 29 Sep 2015, at 1:49 AM, patrick kettner [email protected] wrote:

thanks for the report!

just to clarify, are you seeing this?

—
Reply to this email directly or view it on GitHub.

peterwilsoncc on 28 Sep 2015

Also getting a false negative on Edge

patrickkettner on 1 Oct 2015

On iOS 8.1.2 I'm getting a false negative too.

But, with an old version of Modernizr, emoji support is correctly detected.

I had a look in the code :

Old version:

Modernizr.addTest('emoji', function() {
  if (!Modernizr.canvastext) return false;
  var node = document.createElement('canvas'),
      ctx = node.getContext('2d');
  ctx.textBaseline = 'top';
  ctx.font = '32px Arial';
  ctx.fillText('\ud83d\ude03', 0, 0); // "smiling face with open mouth" emoji
  return ctx.getImageData(16, 16, 1, 1).data[0] !== 0;
});;

New version:

  Modernizr.addTest('emoji', function() {
    if (!Modernizr.canvastext) {
      return false;
    }
    var pixelRatio = window.devicePixelRatio || 1;
    var offset = 12 * pixelRatio;
    var node = createElement('canvas');
    var ctx = node.getContext('2d');
    ctx.fillStyle = '#f00';
    ctx.textBaseline = 'top';
    ctx.font = '32px Arial';
    ctx.fillText('\ud83d\udc28', 0, 0); // U+1F428 KOALA
    return ctx.getImageData(offset, offset, 1, 1).data[0] !== 0;
  });

Here I see two things:

change of the "canary" emoji, I tried back with the smiley face, no luck ;
taking account of the pixelratio ;
change of the pixel looked for.

Before we targeted a 32px emoji, looking in the middle (16, 16), now we look at (12, 12) logical.

After reading http://www.html5rocks.com/en/tutorials/canvas/hidpi/?redirect_from_locale=fr ,
I'm not sure we should take account of devicePixelRatio.

Adding a debug pixel to see where it falls:

    pixel = ctx.getImageData(offset, offset, 1, 1);
    pixel.data[0] = 0;
    pixel.data[1] = 0;
    pixel.data[2] = 255;
    pixel.data[3] = 255;
    ctx.putImageData(pixel, offset, offset);

    var imageDataUri = node.toDataURL('image/png');
    var img = createElement('img');
    img.src=imageDataUri;
    document.body.appendChild(img);

For iPad mini 2 with iOS 8.1.2, here is where it lands :
emoji-modernizr-ipad-mini-2

maximeg on 22 Oct 2015

@maximeg great research! Wanna put a PR together?

ryanseddon on 23 Oct 2015

iOS Chrome + Safari both reporting false negative as far as I can tell too. Is there any progress on a PR for this?

peabnuts123 on 16 Jun 2016

I've also had issues with false positives, and negatives. My solution was to use the Lithuanian flag as the test emoji. And to place the middle of the flag at the top left of the canvas.

!function(){
  var a = document.createElement("canvas"),
      b = a.getContext("2d");

  // align the flag so that the middle of it is in the top left
  // this is important for different resolutions

  b.textBaseline = "middle",
  b.textAlign = "center",

  // use the lithuanian flag because the fallback is "LT"
  // which has the most empty space between the "L" and the "T"

  b.fillText("\ud83c\uddf1\ud83c\uddf9",0,0),

  // if the browser supports emoji flags, then the top left pixel
  // will not be transparent, so .data[0] will be non-zero.
  // .data[0] = 0 for no emoji-flag support.

  b.getImageData(0,0,1,1).data[0] ? document.documentElement.className += " emoji-flags" : document.documentElement.className += " no-emoji-flags"
}();

http://jsbin.com/wexikapoho