aframe not working in Internet Explorer 11 (Windows)

[alexcheninfo]

aframe isn't working in Internet Explorer 11 (Windows). Is this a known issue?

Here I attach a screenshot with the error:

var evt = new CustomEvent(name, data);
Object does not support this action

• A-Frame Version: 0.2.0
• Platform/Device: Internet Explorer 11 (Windows)
  

[msimpson]

According to MDN the CustomEvent constructor is not supported by IE. However, basic support does exist and can be utilized through the following polyfill.

(function () {

  if ( typeof window.CustomEvent === "function" ) return false;

  function CustomEvent ( event, params ) {
    params = params || { bubbles: false, cancelable: false, detail: undefined };
    var evt = document.createEvent( 'CustomEvent' );
    evt.initCustomEvent( event, params.bubbles, params.cancelable, params.detail );
    return evt;
   }

  CustomEvent.prototype = window.Event.prototype;

  window.CustomEvent = CustomEvent;
})();

However, Microsoft states that, "As of Microsoft Edge (build 10240+), the createEvent()/initEvent() constructor pattern for synthetic events is deprecated and has been replaced by the DOM L4 event constructor pattern," which includes the CustomEvent constructor. So while A-Frame is technically using the correct code in regard to modern browsers, you will need to employ a polyfill to combat this issue until Edge is the lowest common denominator.

[alexcheninfo]

@msimpson Okay, I fixed it with this: https://www.npmjs.com/package/custom-event-polyfill. You're right. Maybe it's a Microsoft issue. I think this issue can be closed.

[ngokevin]

Should we include this in the core lib? I don't care much about IE11 given it doesn't have WebVR, but it seems small enough.

[msimpson]

@ngokevin
I think A-Frame usage will grow beyond WebVR, alone. Given your React bindings, it may become a staple for THREE usage in that community. So support for IE 11, which is included alongside Edge in Windows 10, is probably warranted as it's not going anywhere anytime soon.

However, I'm not so sure that the polyfill itself should be included with A-Frame by default. It would probably be better to encourage its usage in the documentation for IE 11 and below; somewhat like Bootstrap with Respond.js. That way you don't force it upon most people or collide with their inclusion of it separately.

[dmarcos]

I use Windows 10 and aframe.io works properly on Edge. If Windows 10 includes both (IE 11 and Edge) you're always one click away from an aframe capable browser. On Windows 7/8 you can just install Chrome or Firefox.

The problem with IE 11 goes beyond CustomEvent support. I've tried the three.js examples and many of them don't even render or are extremely slow. It seems that there also WebGL compatibility issues. I don't think IE 11 reaches the minimum quality bar to do any sort of 3D work. I'm closing this.

[bjorn-ali-goransson]

It should be mentioned that in A-Frame 0.3.2 the only thing needed to work in IE11 is the above mentioned polyfill.

IE11 works great for displaying 360-degree images, amongst other things.

[bjorn-ali-goransson]

One more gotcha which is quite specific, but since this seems to be the top google result for "aframe ie11" I'll just throw it in here.

We had all our assets protected behind a login, and in IE11, using aframe, would not load slash-absolute URLs for images (as in src="/my-image.jpg") and thus the whole specified domain was required. Then, the images would not load because three.js adds crossDomain="anonymous" when fetching textures, the whole debacle resulting in several "$s could not be fetched" errors. Only in IE11, not in Chrome et-al.

This can be avoided by protecting all site assets but not the images.