FAQ
URL
https://travisdowns.github.io/misc/sorting.html
What happened?
The a11y test crashes and reports a question mark, with axe-core error: axe-core Error: Cannot read properties of undefined (reading 'filter').
The trimmed json result:
{
"userAgent": "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/93.0.4577.82 Safari/537.36",
"environment": {
"networkUserAgent": "Mozilla/5.0 (Linux; Android 7.0; Moto G (4)) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/90.0.4420.0 Mobile Safari/537.36 Chrome-Lighthouse",
"hostUserAgent": "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/93.0.4577.82 Safari/537.36",
"benchmarkIndex": 1126,
"credits": {
"axe-core": "4.2.3"
}
},
"lighthouseVersion": "8.1.0",
"fetchTime": "2021-09-24T06:28:33.879Z",
"requestedUrl": "http://192.168.1.66:4000/misc/sorting.html",
"finalUrl": "http://192.168.1.66:4000/misc/sorting.html",
"runWarnings": [],
...
"color-contrast": {
"id": "color-contrast",
"title": "Background and foreground colors have a sufficient contrast ratio",
"description": "Low-contrast text is difficult or impossible for many users to read. [Learn more](https://web.dev/color-contrast/).",
"score": null,
"scoreDisplayMode": "error",
"errorMessage": "axe-core Error: Cannot read properties of undefined (reading 'filter')"
},What did you expect?
No crashes.
What have you tried?
I have reduced the problem to a simple repro case as shown. The key elements are a block-display element (pre) with overflow-x: scroll with an inner display: inline, in this case <span>. The inner element must overflow horizontally have have a certain minimum height (if you remove some of the x chars in either vertical or horizontal direction, the test starts passing).
How were you running Lighthouse?
CLI, Chrome DevTools
Lighthouse Version
lhci 0.8.1
Chrome Version
Google Chrome 93.0.4577.82
Node Version
v16.9.1 (also fails with 12)
Relevant log output
No response
FAQ
URL
https://travisdowns.github.io/misc/sorting.html
What happened?
The a11y test crashes and reports a question mark, with axe-core error:
axe-core Error: Cannot read properties of undefined (reading 'filter').The trimmed json result:
{ "userAgent": "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/93.0.4577.82 Safari/537.36", "environment": { "networkUserAgent": "Mozilla/5.0 (Linux; Android 7.0; Moto G (4)) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/90.0.4420.0 Mobile Safari/537.36 Chrome-Lighthouse", "hostUserAgent": "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/93.0.4577.82 Safari/537.36", "benchmarkIndex": 1126, "credits": { "axe-core": "4.2.3" } }, "lighthouseVersion": "8.1.0", "fetchTime": "2021-09-24T06:28:33.879Z", "requestedUrl": "http://192.168.1.66:4000/misc/sorting.html", "finalUrl": "http://192.168.1.66:4000/misc/sorting.html", "runWarnings": [], ... "color-contrast": { "id": "color-contrast", "title": "Background and foreground colors have a sufficient contrast ratio", "description": "Low-contrast text is difficult or impossible for many users to read. [Learn more](https://web.dev/color-contrast/).", "score": null, "scoreDisplayMode": "error", "errorMessage": "axe-core Error: Cannot read properties of undefined (reading 'filter')" },What did you expect?
No crashes.
What have you tried?
I have reduced the problem to a simple repro case as shown. The key elements are a block-display element (
pre) withoverflow-x: scrollwith an innerdisplay: inline, in this case<span>. The inner element must overflow horizontally have have a certain minimum height (if you remove some of the x chars in either vertical or horizontal direction, the test starts passing).How were you running Lighthouse?
CLI, Chrome DevTools
Lighthouse Version
lhci 0.8.1
Chrome Version
Google Chrome 93.0.4577.82
Node Version
v16.9.1 (also fails with 12)
Relevant log output
No response