This is a known issue and I am mainly opening this issue for others to see. There is currently nothing we can do as this is a browser issue, not a ColorAide documentation issue. Safari, by far, has the best support for modern CSS colors at this time.
Safari (latest): Proper color support and good interpolation support.
Chrome (latest): Proper color support but broken interpolation support outside sRGB. We can force Display P3 interpolation to work OK by performing interpolation in XYZ, but Chrome will limit the interpolation to sRGB colors for some odd reason even if we are on a Display P3 monitor.
Firefox (latest): sRGB support is fine for both color support and interpolation but does not support modern color syntax as of yet.
If it turns out we can mitigate issues in some way, we will. Currently, if detected, we will use the gamut detected by CSS (sRGB, Display P3, or Rec. 2020). Colors within the detected gamut will not be gamut-mapped, but colors outside the gamut will. Browsers, when interpolating, may restrict the gamut even further (incorrectly) but there is nothing we can do. Safari has the best support and will give people the least issues.
Chrome seems to be interpolating the colors properly now. Firefox doesn't seem to be displaying P3 at all yet (limited to sRGB), but it is consistent. I think we can close this for now.
This is a known issue and I am mainly opening this issue for others to see. There is currently nothing we can do as this is a browser issue, not a ColorAide documentation issue. Safari, by far, has the best support for modern CSS colors at this time.
If it turns out we can mitigate issues in some way, we will. Currently, if detected, we will use the gamut detected by CSS (sRGB, Display P3, or Rec. 2020). Colors within the detected gamut will not be gamut-mapped, but colors outside the gamut will. Browsers, when interpolating, may restrict the gamut even further (incorrectly) but there is nothing we can do. Safari has the best support and will give people the least issues.