Chrome 上的混合混合模式转换错误

Question

Chrome 似乎在 animating/transitioning 具有边框半径的元素中的混合混合模式上有一个奇怪的错误。混合模式在翻译时被移除。如何修复？

将鼠标悬停在 chrome 版本 76 中的黄色叠加层上。

div {
  border-radius: 50px;
  overflow:hidden;
  position: relative;
  width: 500px; height: 500px; background-color: red;
  overflow:hidden;
  background: #CC2233 url('https://images.pexels.com/photos/67636/rose-blue-flower-rose-blooms-67636.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500') no-repeat;
}

span {
  z-index: 50;
  position: absolute;
  top: 0;
  left: 0;
  background-color: yellow;
  display:block;
  width: 500px;
  height:331px;
  border-radius: 80px; display: block; mix-blend-mode: multiply;
  transform:translateX(-50%);
}

span:hover {
  transform: translateX(200px);
  transition: all .3s ease;
}

<div>
  <span></span>
</div>

Answer 1

这不是您的代码的问题，但很可能是您的浏览器设置的问题，因为该代码在 Safari 和 Firefox 中运行完美。我可以在我这边切换设置时重现该问题。

解决这个问题：

导航至 chrome://flags
确保您 "Experimental Web Platform features" 已禁用

我想这就是他们称这些功能为实验性的原因 ;)

Chrome 上的混合混合模式转换错误

Mix blend mode transition bug on Chrome

css

google-chrome

mix-blend-mode