0

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?

user11059025
  • 5
  • 2

1 Answers1

0

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

bwigs
  • 96
  • 4
  • I am using chrome on both, just different devices. It's not that it's not blending at all, it's blending differently. – user11059025 Nov 15 '19 at 19:04
  • 1
    Chrome on iOS still is forced to use Webkit to render. it is a restriction placed by apple. see this link: https://apple.stackexchange.com/questions/350671/does-safari-and-google-chrome-for-macos-use-the-same-rendering-engine – bwigs Nov 15 '19 at 22:02