ForEach fails on ClientRect on Safari

[davidwparker]

The forEach method fails when trying to copy over properties on Safari.

forEach:

function forEach(obj, iterator, context) {
  var key;
  if (obj) {
    if (isFunction(obj)) {
      for (key in obj) {
        // Need to check if hasOwnProperty exists,
        // as on IE8 the result of querySelectorAll is an object without a hasOwnProperty function
        if (key != 'prototype' && key != 'length' && key != 'name' && (!obj.hasOwnProperty || obj.hasOwnProperty(key))) {
          iterator.call(context, obj[key], key);
        }
      }
    } else if (obj.forEach && obj.forEach !== forEach) {
      obj.forEach(iterator, context);
    } else if (isArrayLike(obj)) {
      for (key = 0; key < obj.length; key++)
        iterator.call(context, obj[key], key);
    } else {
      for (key in obj) {
        if (obj.hasOwnProperty(key)) {
          iterator.call(context, obj[key], key);
        }
      }
    }
  }
  return obj;
}

In the else statement, the line if (obj.hasOwnProperty(key)) { doesn't work against a ClientRect object in Safari so it never sets the data as expected.

JSfiddle (view the console):
http://jsfiddle.net/scts6mcs/5/

Chrome: it works as expected:

ClientRect {height: 18, width: 447, left: 0, bottom: 18, right: 447…}
447
Object {height: 18, width: 447, left: 0, bottom: 18, right: 447…}
447 

Safari: it fails to copy over the information.

[Log] ClientRect (show, line 45)
[Log] 424 (show, line 46)
[Log] Object (show, line 51)
[Log] undefined (show, line 52) <-- didn't get copied

[caitp]

so, this is actually a bug in Blink --- IDL attributes are meant to live in an interface's prototype, and they are always accessors, not data properties. So the hasOwnProperty() test should fail in Blink/Chrome as well.

In order for this to work for you, you're going to want your own extend() function which does not use hasOwnProperty(). However, what I'm being told (and the WebIDL spec is really hard to process, so I am taking them at their word), these properties should not even be enumerable, so you basically can't depend on for...in to work right in a functioning browser. (edit: Olli seems to be saying that they should be enumerable)

This is an issue with the web platform, you might want to look at filing a bug on https://github.com/heycam/webidl or https://www.w3.org/Bugs/Public/buglist.cgi?component=WebIDL

[davidwparker]

Thanks for the response @caitp

I did end up writing my own extend() function, so it was a pretty easy fix.

Firefox does the same thing, so Chrome is the only odd one out (I'm guessing IE fails too)...

I'll make sure to let the WebIDL know about it too and see what they have to say.

Anyway, I'll just leave this comment here in case anyone searching needs to know about it too.

Thanks again.