Search code examples
cssmix-blend-mode

CSS overlay and screen blend modes look different on phone and laptop

I am trying to use blend modes for a website for a project, but I've found that they look different on my phone browser (chrome v 78.0.3904.84 on iphone 7) to my browser on my laptop (chrome v 78.0.3904.97 on mac). It looks like this on the laptop, and like this on the phone. So far as I can tell, both browsers support mix-blend-modes, so I'm not sure what's different. The code for the elements that are being blended is:

    .GraphButton {
    font-size: calc(10px + 8vmin);
    font-weight: 300;
    color: var(--button-text);
    background: var(--main-yellow);
    mix-blend-mode: overlay;
    height: 27vh;
    width: 35vw;
    margin: auto 6vw;
    overflow: hidden;
}

This is a div on top of an svg background image. There is no transform involved.

Does anyone know what could be causing the difference or how to fix it?

Solution

  • mix-blend-mode is not supported on SVG elements in Safari and iOS Safari, but it IS supported for SVG elements in chrome. See https://caniuse.com/#search=mix-blend-mode