WebGL check fails on Windows 7 Chrome 55

[cpsubrian]

One of our clients noticed the webgl check failing in their Chrome. We reproduced this in BrowserStack on Windows7-Chrome55.

The problem appears to be that the browser does not set up the 'webgl' context on canvas elements that are not in the DOM. AKA the following test doesn't work:

 // Test if WebGL is supported
webGL : (function(el) {
  try {
    return !!(window.WebGLRenderingContext && (el.getContext("webgl") || el.getContext("experimental-webgl")));
  } catch(err) {
    return false;
  }
})(util.create("canvas")),

If I do the following, it works fine (add the canvas to the actual DOM before checking).

 // Test if WebGL is supported
webGL : (function(el) {
  try {
    document.body.appendChild(el);
    var check = !!(window.WebGLRenderingContext && (el.getContext("webgl") || el.getContext("experimental-webgl")));
    document.body.removeChild(el);
    return check;
  } catch(err) {
    return false;
  }
})(util.create("canvas")),

[cpsubrian]

Hrmm, in practice this doesn't seem to be always working. The modernizr webgl test looks like the following:

define(['Modernizr', 'createElement'], function(Modernizr, createElement) {
  Modernizr.addTest('webgl', function() {
    var canvas = createElement('canvas');
    var supports = 'probablySupportsContext' in canvas ? 'probablySupportsContext' :  'supportsContext';
    if (supports in canvas) {
      return canvas[supports]('webgl') || canvas[supports]('experimental-webgl');
    }
    return 'WebGLRenderingContext' in window;
  });
});

Apparently they don't require the context check, just optionally use it. The fallback is to check 'WebGLRenderingContext' only, which I can confirm the test browser I'm using has.

[cpsubrian]

Ok, so sorry to play issue whiplash here. The browser in question apparently does technically support WebGL, but chrome disables it due to particular graphic hardware/driver combination. So, ultimately your original check is probably sufficient. However, I've noticed a few other modern feature checkers (most notably the check inside mapbox-gl) uses a check more similar to the 2nd one I posted. So it might be worth updating to that anyhow.