Question

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>

Answer 1

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

要解决此问题：

导航至chrome：// flags
确保您具有“实验性Web平台功能” 已禁用

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

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

1 个答案: