“Violation readystatechange handler took 760ms” After Updating Chrome

Question

After updating Google Chrome v57.0.2987, our website is getting errors when we open Collorbox:

Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check https://xhr.spec.whatwg.org/.

    [Violation] 'readystatechange' handler took 760ms
    [Violation] Forced reflow while executing JavaScript took 51ms
    [Violation] Forced reflow while executing JavaScript took 43ms
    [Violation] Forced reflow while executing JavaScript took 38ms

This only happens sometimes. And when we get these errors, Colorbox does not work for us.

Is there maybe a bug on Google Chrome?

Edit: Magento merging JavaScript is causing the error. This is what’s not working right. If I don’t merge them, then I don’t get these errors and it’s loading correctly.

VM23586:4 Uncaught TypeError: Cannot set property 'value' of null  at choose (eval at <anonymous> (0a9e2e3….js:11743), <anonymous>:4:73)  at HTMLImageElement.onclick (letto-moderno-imbottito-prisma.html:1)
Uncaught TypeError: Cannot read property 'close' of undefined  at HTMLDivElement.onclick (letto-moderno-imbottito-prisma.html:1)

Plunge

it was working before the last update of chrome, so I guess it must be a colorbox request that is too heavy? – Plunge

AKA Synchronous calls are bad. – Buckling

It seems to be a duplicate: #41219007 – Vitalize

Possible duplicate of Violation Long running JavaScript task took xx ms – Lomasi

Answer 1

Chrome is just saying that your code is blocking the UI too much.

Lomasi

I had the same problem. On a button click, I was alerting the user via a pop up, and the pop up would stay there until the user clicked on 'OK'. I changed the alert function call to console.log and it is fine now. – Royal