window.onscroll = function(e) {
if(scrollY > 300) play();
}
Это экспериментальная технология, часть предложения Harmony (ECMAScript 6).
(function(ELEMENT) {
ELEMENT.matches = ELEMENT.matches || ELEMENT.mozMatchesSelector || ELEMENT.msMatchesSelector || ELEMENT.oMatchesSelector || ELEMENT.webkitMatchesSelector;
ELEMENT.closest = ELEMENT.closest || function closest(selector) {
if (!this) return null;
if (this.matches(selector)) return this;
if (!this.parentElement) {return null}
else return this.parentElement.closest(selector)
};
}(Element.prototype));
https://developer.mozilla.org/ru/docs/Web/API/Element/closest
И, как оказалось, объекты - это неупорядоченный набор свойств, в отличие от массива.
Спасибо за попытку помочь, но я сразу же переписал код в соответствии с советом display: block на массивы - и всё ожидаемо заработало во всех броузерах.
К сожалению, совет про использование числовых ключей в объекте - скорее вреден, потому что это незадокументированная фича и, как оказалось, она работает не во всех броузерах, поэтому можно наступить на те же грабли, что и я.
Для остальных:
При необходимости стекового сохранения данных в единый объект - подходят исключительно массивы.