onload event not supported for PhantomJS, so CSSLoader hangs

[pmorch]

requirejs hangs forever on a css!file requirement in PhantomJS because of a known issue: onload event not fired for stylesheets · Issue #12332 · ariya/phantomjs.

The problem is in _isEventSupported that (more or less) comes from Detecting event support without browser sniffing — Perfection Kills. this._isEventSupported("link", "load") returns true for phantomjs even though it never actually fires :-(

I don't know that there is solution short of navigator.userAgent sniffing. I understand if you don't want that in your code, but reality is that for us, the initial require of many modules never returns and so none of our JavaScript is ever executed leaving an empty page in PhantomJS.

So should this._isEventSupported("link", "load") return false based on navigator.userAgent.match(/PhantomJS/)? Or should one white list the browsers where this._isEventSupported() is known to work instead? Not a pleasant choice to have to make...

[pmorch]

This has now gotten worse with phantomjs 2.0. My current diff for css.js looks like the following, and even then it doesn't work reliably. But it may be a start for others with the same symptoms to build on:

> git diff db2ac4f49cc4017db723348a54532e1b5b1bc06f phantomjs css.js 
diff --git a/capmon/cgi/jscript/requirejs/css.js b/capmon/cgi/jscript/requirejs/css.js
index e885c7e..902b1c9 100644
--- a/capmon/cgi/jscript/requirejs/css.js
+++ b/capmon/cgi/jscript/requirejs/css.js
@@ -130,7 +130,7 @@
                                     }

                                     if (cssRulesAllowed) {
-                                        if (cssRules && cssRules.length && cssRules.length > 0) {
+                                        if (cssRules && cssRules.length && cssRules.length > 0 || navigator.userAgent.match(/PhantomJS/)) {
                                             callback();
                                             return;
                                         }
@@ -185,7 +185,13 @@
             loadStylesheet:function (url, callback) {
                 var loadedWithWorkaround = this._checkIeLimitWorkaround(url, callback);
                 if (!loadedWithWorkaround) {
-                    if (this._isEventSupported("link", "load")) {
+                    if (this._isEventSupported("link", "load") &&
+                        // See: onload event not supported for PhantomJS, so
+                        // CSSLoader hangs
+                        // https://github.com/dimaxweb/CSSLoader/issues/4
+
+                        ! navigator.userAgent.match(/PhantomJS/)
+                    ) {
                         this._loadNative(url, callback);
                     }
                     else {