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

【问题标题】：Mix blend mode transition bug on ChromeChrome 上的混合混合模式转换错误
【发布时间】：2019-08-26 13:59:21
【问题描述】：

Chrome 似乎有一个奇怪的错误，即在具有边框半径的元素中动画/过渡混合混合模式。混合模式在翻译时被删除。如何解决？

将鼠标悬停在 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>

【问题讨论】：

标签： css google-chrome mix-blend-mode

【解决方案1】：

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

解决这个问题：

导航到 chrome://flags
确保您已将“实验性 Web 平台功能”禁用

我想这就是为什么他们称这些功能为实验性的；）

【讨论】：