P3 Color Bug with Repeating SVG Background Images

Here’s a fun one. There’s a bug in Chrome and Safari where SVGs that use Display P3 colors get changed to sRGB when set as repeating background images. First, a few details: Seeing this in Chrome 150 and Safari 26 Firefox (as of 152) needs silly config changes so I didn’t test there. Assuming it has the same issue This post is about Display P3, but the same applies to other wide gamut colors like oklch Demo on CodePen Keep in mind, you have to be on a display that supports Display P3 colors to see this bug. It’s a bit tricky to show the problem in the CodePen or here because of that. Take a simple SVG square with a red fill of color(display-p3 1 0 0). <svg xmlns="http://www.w3.org/2000/svg" width="300" height="300" viewBox="0 0 300 300"> <rect fill="color(display-p3 1 0 0)" width="300" height="300" /> </svg> This works as expected in supported browsers on supported displays as internal SVG and img. It shows up as the brightest red available in Display P3 color. Things bug out when…