Esri bootstrap-map-js and Invalid argument error on IE 7/8

Question

I'm using this awesome project called bootstrap-map-js.

A simple framework for building responsive mapping apps with ArcGIS and Bootstrap.

Since Esri ArcGIS JavaScript API states that they support IE7+ I thought the amazing bootstrap-map-js project would also be compatible with IE 7. Maybe it is and the problem is in my code...

I'm getting an Invalid Argument error with no further info on IE 11 Developer Tools console window when simulating the page on IE 7/8 document modes. IE 9 onwards works great. All other browsers work great too! :) Only finicky IE refuses to work as always...

Looks like dojo.require is barking somewhere. See this related question: Dojo nested requires on IE7 and IE8 causes Invalid Argument Exception

If I remove the reference to bootstrapmap.js and the var map = ... declaration, then the code works and I see hey Leniel! otherwise the code breaks and I see the Invalid argument. The code breaks in the call to BootstrapMap.create.

Can anyone shed some light on what's going on with finicky IE? Is there anything I can do to see more from the error? As you see in the image, there's no message, description, etc. :(

Here's the minimum code I had to assemble to get to what was causing the error:

<!-- ArcGIS JavaScript API v3.8 -->
<script type="text/javascript" src="http://localhost/arcgis_js_api/library/3.8/3.8/init.js"></script>

<script type="text/javascript">

function init()
{
    require([
        "esri/map",
        "/myproject/Scripts/bootstrapmap.js",
        "esri/layers/FeatureLayer"
    ], function(
        Map,
        BootstrapMap,
        FeatureLayer
    )
    {

        // Get a reference to the ArcGIS Map class
        var map = BootstrapMap.create("mapDiv", {
            basemap: "oceans",
            center: [-117.789, 33.543],
            zoom: 12
        });

        alert('hey Leniel!');

    });
}

dojo.addOnLoad(init);

</script>

---

I made some progress on this issue as you can read here.

I read Configuring Dojo with dojoConfig and then added this before ArcGIS JS API script tag:

<!-- set Dojo configuration, load Dojo -->
<script>
    dojoConfig = {
        has: {
            "dojo-firebug": true
        },
        parseOnLoad: true,
        async: true
    };
</script>

Now I get a more descriptive error instead of only Invalid argument as before. IE Dev Tools shows this:

SCRIPT87: Invalid argument.
File: init.js, Line: 136, Column: 65

This is line 136 in init.js when I click on the link provided by IE Dev Tools:

b;b=d[b]?"cssFloat"in f.style?"cssFloat":"styleFloat":b;if(3==k)return q?g(f,e):f.style[b]=e;for(var r in b)l.set(a,r,b[r]);return l.getComputedStyle(f)};return l})},"dojo/dom-geometry":function(){define(["./sniff","./_base/window","./dom","./dom-style"],function(b,n,k,m){function l(a,b,d,c,h,f){f=f||"px";a=a.style;isNaN(b)||(a.left=b+f);isNaN(d)||(a.top=d+f);0<=c&&(a.width=c+f);0<=h&&(a.height=h+f)}function r(a){return"button"==a.tagName.toLowerCase()||"input"==a.tagName.toLowerCase()&&"button"==

Sounds like IE 7/8 is barking about some crazy CSS manipulation done by ArcGIS JS API.

Answer 1

Fixed it connecting the dots...

Searched for NaNpx e's value as I had never seen that before. Found this jQuery ticket.

Followed the advice given there and changed that return in line 136,

from:

return q?g(f,e):f.style[b]=e;

to:

return q?g(f,e):f.style[b]=(e=='NaNpx'?'0px':e);

Note: I'm using jQuery 1.11.0 which supports IE 7.