I think your system is ignoring the color profile attached to the image. They wrote:
Remember the red square with the faint WebKit logo?
That was generated by creating an image in the Display
P3 color space, filling it with 100% red, rgb(255, 0, 0),
and then painting the logo in a slightly different red,
rgb(241, 0, 0). On an sRGB display, you can’t see the
logo, because all the red values above 241 in Display P3
are beyond the highest red in sRGB, so the 241 red and
the 255 red end up as the same color.
But if your browser ignores color profiles, and many do, then the P3 -> sRGB conversion won't happen, and your sRGB monitor will be told to display some 241 red and some 255 red instead of all 255 red.
I have a retina display, use Firefox as default browser. In firefox I see the webkit logo, in Safari not. So it seems like Firefox has better color support than Safari? I would expect the opposite. How does this work?
Only late Retina display may have a wide enough gamut, so it's still possible that Firefox throws away the color profile (and therefore shows both reds as different, yet inaccurate), while Safari handles it (and therefore collapses the reds to 255).
"Debugging" color settings is tricky, because it can be hard what goes wrong along the chain, and what you end up observing may be counterintuitive.
EDIT: I observe the same behaviour than you on my early 2013 13" Retina MBP. Firefox seems to ignore the color profile on the red image while every other app doesn't (including downloading the image and using Preview). Other images, notably the Iceland one, highlight that my screen does have a wider gamut in some color areas, maybe just not in the red.
To the best of my knowledge, the only Apple devices with wide-gamut displays are the 2015 iMac and the 2016 9.7" iPad Pro. So I'd suspect that Firefox is either ignoring the color profiles, or handling them differently than Safari.
To be fair, on my 2013 rMPB, the Shoes one does not show a single difference whereas the Iceland, Italy, Sunset and Flower ones are much more vibrant and indicate that a wider gamut than sRGB may be available, but certainly not as much as the latest display.
I'm not sure about macos, but on windows, FF has supported color correction for years - in fact, it for a long time was the only browser on windows to do color correction.
A quick google finds this: http://cameratico.com/guides/web-browser-color-management-gu... which suggests that even on macos it used to be at least as good as safari, although apparently by default it made the (idiotic) assumption that untagged images should be displayed in the native gamut. They should be displayed as sRGB, because untagged almost always means "the author didn't think about it, and had an sRGB display".
Not sure what's going on with that image on the webkit demo, but I'll note that clipping out of gamut colors is by no means the obvious solution to out-of-gamut colors. That's what rendering intents are all about; and well known ones include absolute intent, relative intent, and perceptual intent. Perhaps firefox is assuming a perceptual intent, and which here would cause desaturation to retain out-of-gamut detail.
