Binding to height attribute produces error in IE

Question

Binding the td.height attribute to a number produces a stack trace in IE11, but works in Firefox and Chrome.

<td [height]="bufferHeight"></td>

The bufferHeight variable is initialized to 30

  bufferHeight: number;

  constructor() {
    this.bufferHeight = 30;
  }

One way to correct this is to make buffer height a string and initialize it to "30px".

I eventually fixed the code when I realized the height attribute is deprecated in HTML5 and switched to the following

<td [style.height.px]="bufferHeight">

Why is IE behaving differently? Errors like this can be hard to track down due to the cryptic error message. This project was bootstrapped with angular-seed.

Error: Uncaught (in promise): Error: Error in http://localhost:5555/app/test/test.component.html:17:44 caused by: Invalid argument.
   at resolvePromise (http://localhost:5555/node_modules/zone.js/dist/zone.js?1482518301781:429:25)
   at resolvePromise (http://localhost:5555/node_modules/zone.js/dist/zone.js?1482518301781:414:17)
   at Anonymous function (http://localhost:5555/node_modules/zone.js/dist/zone.js?1482518301781:462:17)
   at ZoneDelegate.prototype.invokeTask (http://localhost:5555/node_modules/zone.js/dist/zone.js?1482518301781:234:17)
   at onInvokeTask (eval code:5967:25)
   at ZoneDelegate.prototype.invokeTask (http://localhost:5555/node_modules/zone.js/dist/zone.js?1482518301781:234:17)
   at Zone.prototype.runTask (http://localhost:5555/node_modules/zone.js/dist/zone.js?1482518301781:136:21)
   at drainMicroTaskQueue (http://localhost:5555/node_modules/zone.js/dist/zone.js?1482518301781:368:25)
   at invoke (http://localhost:5555/node_modules/zone.js/dist/zone.js?1482518301781:308:25)