CSS background-blend-mode not working in chrome mobile with viewport meta tag

问题

Most blend modes do not work in chrome mobile - I have been able to get 'screen', and 'overlay' to work, but not ones like multiply, darken, exclusion, etc. Does anyone know if this has to do with perhaps the s9's gpu architecture being incompatible here?

Code pen

Here is a simple example with screen shots:

<style>
.blended-gradient{
  background-blend-mode:exclusion, normal;
  background:linear-gradient(black 0, white 50%,  black 100%),
    radial-gradient(black 0, white 70%, black 70.1%);  
  height:200px;
  width:200px;
}
</style>
<div class="blended-gradient"></div>

In chrome desktop, I see a nice metallic looking ball:

In chrome android, I see failure:

Would love to know if this is a known issue or if there are any workarounds. Please note that I am in a chrome-only environment, so I am not as concerned with other browsers currently.

Update 1

It appears this may be a Samsung s9 issue as someone else is seeing this sporadically on s9s since April 2019. I have only tested on my personal s9. Requesting desktop version of site solves it, but that does not help end users. CSS background-blend-mode not working on Samsung S9

Update 2

Removing the meta name=viewport tag fixes the issue and everything renders fine. This is obviously not a feasable workaround, so I am hoping a chrome developer sees this. Will post a bug.

来源：https://stackoverflow.com/questions/57245650/css-background-blend-mode-not-working-in-chrome-mobile-with-viewport-meta-tag