Some custom icons cause diagonal streaks/lines to render in Chrome/Windows 10
Closed this issue · 2 comments
Chrome on some Windows 10 machines displays diagonal streaks on the page. The problematic icons seem to be help-i, triangle-solid, exclamation, and circle-solid. For each of these icons, there is a set of diagonal streaks. If these icons are removed from the font, then the streaks disappear.
Steps to duplicate:
- Open Chrome on Windows 10
- Navigate to
chrome://settingsand ensure that hardware acceleration is enabled. - Navigate to
chrome://flagsand ensure GPU rasterization is set to "Default" or "Enabled". - Navigate to https://htmlpreview.github.io/?https://github.com/blackbaud/skyux-icons/blob/master/src/demo.html
- Notice the streaks across the page
Disabling GPU rasterization or hardware acceleration and relaunching the browser causes the issue to go away.
Related issue on Stack Overflow with Chrome and hardware acceleration/GPU rasterization: https://superuser.com/questions/1220106/weird-straight-lines-in-chrome-browser
Using an SVG optimizer may solve the issue (untested): https://github.com/svg/svgo
Issue was first filed against the alert component in modern theme as it uses the problematic icons: https://github.com/blackbaud/skyux-indicators/issues/98
Fixed in #14