CSS mix-blend-mode: Browser/Display Inconsistency

Question

I utilize the mix-blend-mode property on my portfolio site to achieve a fun effect with the landing page headline. I am using the multiply value to blend 3 layers that are cyan, magenta, and yellow. Where they overlap I would expect the result to be black.

That used to be the case. I've noticed recently, depending on the browser and display I view it on, that is not the case.

I put together a simple code pen to demonstrate this.

HTML

    <main class="wrap">
      <div class="color-wrap">
      <div class="c"></div>
      <div class="m"></div>
      <div class="y"></div>
      </div>  
    </main>

CSS

    .wrap {
        width: 100vw;
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #fff;
    }
    .color-wrap {
        width: 300px;
        height: 300px;
        border: 1px solid #000;
        position: relative;
        background-blend-mode: multiply;
    }
    .c, .y, .m {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        mix-blend-mode: multiply;
    }
    .c {
        background-color: cyan;
        top: 100px;
        left:100px;
    }
    .m {
        background-color: magenta;
        top: -100px;
        left:-100px;
    }
    .y {
        background-color: yellow;
    }

With Chrome and Safari, on my MacBook Pro display, the result of the 3 blended colors is a muddy purple. If I view it on my external monitor the result is closer to black. On Firefox, regardless of the display, the result is pure black. I'm attaching screenshots.

I don't like the muddy purplish color that I see in certain cases and wish this was more consistent. Any thoughts or insights?