Color Contrast Error: "Element midpoint exceeds the grid bounds"

[FelipeFama]

FAQ

• [X] Yes, my issue is not about variability or throttling.
• [X] Yes, my issue is not about a specific accessibility audit (file with axe-core instead).

URL

https://nefa-crypto-page.vercel.app

What happened?

When I run Lighthouse to test my web page, my accessibility score does not appear in the browser, instead, an exclamation mark appears.

What did you expect?

That the score would appear, normally without any type of problem.

What have you tried?

1 - I tested on Opera and Chrome on Ubuntu and tested on Windows. 2 - In Windows, only Opera worked normally. 3 - I noticed that the ones that didn't work had this version Using Chromium 119.0.0.0 with devtools. 4 - Opera on Windows has a version earlier than this. 5 - I tested the lighthouse extension and it worked normally too, but it has this version Using HeadlessChromium 119.0.6045.105 with lr.

How were you running Lighthouse?

Chrome DevTools, WebPageTest

Lighthouse Version

11.0.0

Chrome Version

119.0.6045.159

Node Version

18.16.0

OS

Windows/Linux

Relevant log output

No response

[adamraine]

I can't repro, it's possible that some Chrome extension is adding content that causes this error. Can you try running Lighthouse from an incognito window in Chrome?

[FelipeFama]

I tested it but it didn't work.

[adamraine]

Sorry, missed that you mentioned this was only for desktop. I can repro with this command lighthouse https://nefa-crypto-page.vercel.app/ --preset=desktop. Most likely an issue in Axe, I will investigate.

[adamraine]

https://github.com/dequelabs/axe-core/issues/4253

[adamraine]

@FelipeFama this is no longer reproducible for me. Has the content on the page changed at all? Are you still able to reproduce this?

[FelipeFama]

Yes @adamraine , I can still believe it is something related to axe-core or some version of chromium.

[clouddevloper]

@adamraine I am still not able to understand how to resolve this. It will be relally helpful if you can explain.

[adamraine]

The issue has not been resolved, please see the upstream bug https://github.com/dequelabs/axe-core/issues/4253 for more info.

[chmerk]

We have the same issue, just on mobile. I added a comment in https://github.com/dequelabs/axe-core/issues/4253

[kmurugulla]

@adamraine - I am observing the similar issue "axe-core Error: Element midpoint exceeds the grid bounds" for "Mobile" on https://www.ust.com/en/insights . Tried on incognito window but seeing the same error. Appreciate any inputs

Chrome :

[clouddevloper]

Still not able to resolve this issue yet. https://github.com/GoogleChrome/lighthouse/issues/15750

Let me know if any one can help here.

Thanks

[chmerk]

@clouddevloper @kmurugulla Please add this to the issue https://github.com/dequelabs/axe-core/issues/4253 So the axe developers can prioritize the issue accordingly. :)

[aprzygocki]

I have the same issue

[neronim1141]

I can report the same issue

[dylanrihan]

I have the same issue, any suggestions?

[TutorFx]

I'm having this same issue on Swiper component

https://github.com/TutorFx/vs-contabil https://www.vscontabil.net/

[chmerk]

@aprzygocki @neronim1141 @dylanrihan @TutorFx Could you please also report the issue at https://github.com/dequelabs/axe-core/issues/4253 to make them aware, that there are more people/sites affected. So far there seems to be little activity :( Thanks! :)

[TutorFx]

@aprzygocki @neronim1141 @dylanrihan @TutorFx Could you please also report the issue at dequelabs/axe-core#4253 to make them aware, that there are more people/sites affected. So far there seems to be little activity :( Thanks! :)

Thanks for moving the thread @chmerk, I was able to uncover the root cause of the issue and described a workaround in the discussion there.

[adamraine]

Resolved by https://github.com/GoogleChrome/lighthouse/pull/15887, this will ship in the next Lighthouse release.