This week when Google updated to Google Chrome to version 142, a white diagonal line started to appear many of my next.js websites and app. This bug does not appear on FireFox. It seem to be a rendering issue connected to SVG and how Chrome process them with “graphic acceleration”
I expect the diagonal white line to not appear. My websites and apps were working fine before Google Chrome updated to version 142 .
How to reproduce:
- Start application in Google Chrome version 142 with Next.js 15.x.
- Go to a page that has SVG graphic and diagonal white line will appear. Some pages it appears other pages it won’t.
See screenshots of the white line bug.
- In Google Chromes settings “System” there is an option to turn off “Use graphics acceleration when available”. This actually stops the white line bug from rendering. However this setting is turned on be default. So this bug will be effecting most people. Need to find a better solution.
Tech details:
Windows 11
Next.js 15.x
Node v22.16.0
Graphics Card NVIDIA GeForce RTX 3050 OEM