wisniewskit
commented
5 years ago Searching online, this TypeError: "CSS2Properties doesn't have an indexed property setter for '0'" error seems to be something people run into with React from time to time. Sure enough, that seems to be the case here. It's failing in this initializer:
}), V = a(p.prototype, "onResize", [Y.action], {
enumerable: !0,
initializer: function() {
var e = this;
return Object(J.debounce)(250, function() {
var t = {
desktop: Z.d,
largeDesktop: Z.g,
mobile: Z.i,
mobileOnly: Z.j,
tablet: Z.n,
tabletLandscape: Z.o
};
Object.keys(t).forEach(function(e) {
var n, r = t[e].replace(/@media\s+/, "");
t = oe({}, t, (n = {}, n[e] = window.matchMedia(r).matches, n))
}), e.setStateDeprecated({
isMediaQueriesSet: !0,
viewport: oe({}, e.viewport, {
height: window.innerHeight,
width: window.innerWidth
}),
mediaQueries: oe({}, e.mediaQueries, t)
})
})
}
})I noticed that commenting out the two "media queries" lines un-broke the page, but I couldn't find any obvious leads from the top down, so I started from the bottom of the stack trace.
This is the function where it's failing (with an auxiliary function):
function it(e, t) {
e = e.style;
for (var n in t)
if (t.hasOwnProperty(n)) {
var r = 0 === n.indexOf("--"),
o = ot(n, t[n], r);
"float" === n && (n = "cssFloat"),
r ? e.setProperty(n, o) : e[n] = o
}
}
function ot(e, t, n) {
return null == t || "boolean" === typeof t ||
"" === t ? "" : n || "number" !== typeof t ||
0 === t || Vi.hasOwnProperty(e) &&
Vi[e] ? ("" + t).trim() : t + "px"
}It's bombing on the e[n] = o part (effectively element.style["0"] = undefined)
This is the object where the 0 property comes from:
Object {
0: undefined
bottom: 0
left: 0
marginBottom: 0
marginLeft: 0
marginRight: 0
marginTop: 0
paddingBottom: 0
paddingLeft: 0
paddingRight: 0
paddingTop: 0
position: "absolute"
right: 0
top: 58
<prototype>: Object
}These are the elements it's trying to set the style properties of:
<a data-metrics-event-name="clickAction" data-metrics-link-module="score strip" data-metrics-link-name="2019020300" data-metrics-link-type="global nav" data-metrics-link-url="/gamecenter/2019020300/2018/POST22/patriots@rams" aria-label="Patriots 13">
<a data-metrics-event-name="clickAction" data-metrics-link-module="score strip" data-metrics-link-name="2019020300" data-metrics-link-type="global nav" data-metrics-link-url="/gamecenter/2019020300/2018/POST22/patriots@rams" aria-label="Rams 3">
<a data-metrics-event-name="clickAction" data-metrics-link-module="score strip" data-metrics-link-name="2019020300" data-metrics-link-type="global nav" data-metrics-link-url="/gamecenter/2019020300/2018/POST22/patriots@rams" aria-label="Final">And all the various objects involved seem to be native objects.
As expected, I can't reproduce the problem in a reduced test-case:
document.createElement("a").style["0"] = undefined;
/* or even */
it(document.createElement("a"), {0: undefined});Weirder still, Chrome is also running the same element.style[0]=undefined on the same elements without throwing an exception like Firefox. And if I hack it so Firefox uses the setProperty form or skips the 0, it also works.
Frankly I'm stumped as to why certain CSS2Properties objects would selectively reject a 0 index like this. @bzbarsky, you wouldn't happen to have any ideas?
bzbarsky
domenic
yuki3
karlcow
lock[bot]
URL: https://www.nfl.com/gamecenter/2019020300/2018/POST22/patriots@rams?icampaign=scoreStrip-globalNav-2019020300
Browser / Version: Firefox Nightly 67.0a1 (2019-02-03) Operating System: Windows 10 Pro Tested Another Browser: Yes
Problem type: Site is not usable Description: Blank page displayed on “Patriots vs Rams” score page Steps to Reproduce:
Expected Behavior: “Patriots vs Rams” score and details page is displayed.
Actual Behavior: Blank page is displayed.
Note
Watchers: @softvision-oana-arbuzov @softvision-sergiulogigan @cipriansv
sv;
Browser Configuration
From webcompat.com with ❤️