1

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>

4

1 回答 1

1

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

要解决此问题：

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

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

于 2019-08-26T14:06:01.730 回答