Bug in Internet Explorer 9 concerning Element object?

[jonas-e]

I added the AOP.Dimensions class below to my javascript library a couple of weeks ago and tested it daily in IE9. It has been working fine all along. Until now - suddenly I get this error message on the "e instanceof Element" expression:

'Element' is undefined

If I open another web page, e.g. google.com, the following works fine from the console:

 document.body instanceof Element

Any suggestions to what might have gone wrong?

AOP.Dimensions = function(e){
  // Init:
  var _this = this;
  this.CLASS_NAME = 'AOP.Dimensions';
 
  if(!(e instanceof Element)){ 
    AOP.log(this.CLASS_NAME+' error: Invalid argument.',arguments,this); 
    return false; 
  }
 
  var $e = $(e)
    , off = $e.offset()
    , w = $e.outerWidth(true)
    , h = $e.outerHeight(true)
  ;
  // Visible?
  var V = this.visible = ( e.style.display === 'none' || e.style.visibility === 'hidden' ) ? false : true ;
 
  // Properties:
  this.element = e;
  this.offset = V ? off : {left:0, top:0};
 
  this.left = V ? off.left : 0 ;
  this.top = V ? off.top : 0 ;
  this.right = V ? this.left + w : 0 ;
  this.bottom = V ? this.top + h : 0 ;
 
  this.width = V ? w : 0 ;
  this.insideWidth = V ? $e.width() : 0 ;
 
  this.height = V ? h : 0 ;
  this.insideHeight = V ? $e.height() : 0 ;
 
  this.hPad = V ? $e.innerWidth() - $e.width() : 0 ;
  this.vPad = V ? $e.innerHeight() - $e.height() : 0 ;
 
  this.hBorder = V ? (this.width - this.hPad) - this.insideWidth : 0 ;
  this.vBorder = V ? (this.height - this.vPad) - this.insideHeight : 0 ;
 
  this.insideTop = V ? this.top + (this.vBorder/2) + (this.vPad/2) : 0 ;
  this.insideBottom = V ? this.bottom - (this.vBorder/2) - (this.vPad/2) : 0 ;
  this.insideLeft = V ? this.left + (this.hBorder/2) + (this.hPad/2) : 0 ;
  this.insideRight = V ? this.right - (this.hBorder/2) - (this.hPad/2) : 0 ;
 
};

It all works fine in Chrome 25 and Firefox 19.0.

[jonas-e]

After several hours of despair, it now works again for no apparent reason!

Posted the same question over here:
http://stackoverflow.com/questions/1...element-object

My latest comment to that post:

Now this is weird: I just put your meta tag into the document head: <meta http-equiv="X-UA-Compatible" content="IE=edge" /> Now it works. Then I removed the tag again. It still works. An believe me, I have cleared the cache a million times!

[Pullo]

Oh well, at least it's working now and you can stop despairing
Thanks for taking the time to let us know you got it (kinda) solved.

[DaveMaxwell]

After several hours of despair, it now works again for no apparent reason!

Posted the same question over here:
http://stackoverflow.com/questions/1...element-object

My latest comment to that post:

If that worked, then it sounds like your site was in quirks more or rendering in another IE mode than the current standards. IE=edge forces IE to render in the most recent standards the browser can render in (i.e. IE8 renders in IE8 standards, IE9 renders in IE9 standard, etc.).

[jonas-e]

But why would it still work after I removed the tag again ..

[DaveMaxwell]

Without seeing the whole page, it's hard to tell what might be causing the browser to sometimes go out of standards mode.

[jonas-e]

Thanks. Can't show you the whole page - it is behind a firewall. It is Oracle Apex stuff and I am developing a javascript library on top of OpenLayers and Apex. Been working on it for a year and a half now.

[jonas-e]

The w3schools doc is scarse on the Element class:
http://www.w3schools.com/jsref/dom_obj_element.asp

But Sitepoint's is more elaborate:
http://reference.sitepoint.com/javascript/Element

It indicates that the support for Element is buggy in older versions of IE. Perhaps I should consider using Node instead, seems less buggy:
http://reference.sitepoint.com/javascript/Node

In the example above, using Element is only a "nice to have". But in this method, it is essential:

  this.setContent = function(c){
    if(c instanceof Element){
      this.$contentDiv.empty().append(c);
    } else {
      this.$contentDiv.html(String(c));  
    }
  };

Any suggestions how to achieve the above without running into issue with the buggy support for Element?

[jonas-e]

This works, although less concise:

  this.setContent = function(c){
    if(typeof c === 'string'){
      this.$contentDiv.html(c);        
    } else {
      this.$contentDiv.empty().append(c);
    }
  };

[jonas-e]

The problem is back today:

1. At the first page load of the day, IE9 claims that 'Element' is undefined.
2. Tried with 'Node' instead - same problem.
3. Put the meta tag in the page header: <meta http-equiv="X-UA-Compatible" content="IE=edge" />
4. It works.
5. Also after I remove the tag.

Guess I should configure Oracle Apex to always include that meta tag on the pages ...

[DaveMaxwell]

Guess I should configure Oracle Apex to always include that meta tag on the pages ...

When it breaks again, look closely at the content of the page - are you bringing in content from another source which would cause the page rendering mode to change? You might be able to mitigate the problem by correcting the erroneous content.

Adding the meta tag MIGHT fix the problem. But it might not depending on the content.

The reason you see the correction when you add the meta tag is the site is probably cached and adding the meta tag forces the cache to clear.

[jonas-e]

Thanks for the advice!