css - 组合过滤器和 :hover in Chrome 时的奇怪行为

Question

有人可以解释为什么会这样吗？ 当我同时使用 transform 和 filter 时，overflow 属性将不起作用并出现 Angular 点。这是错误还是我遗漏了什么？ 没有 filter 一切正常。在 Mozilla 中一切正常。

<div class="wrap">
    <div class="image"></div>
</div>

<style>
.wrap{
    width: 200px;
    height: 200px;
    overflow: hidden;
    border: 1px solid;
    border-radius: 15px;
}
.image{
    background: url(https://interactive-examples.mdn.mozilla.net/media/examples/grapefruit-slice-332-332.jpg);
    background-position: center;
    background-size: cover;
    width: 100%;
    height: 100%;
    transition: all 1s ease-out;
}
.image:hover{
    -webkit-transform: scale(1.2, 1.2);
    transform: scale(1.2, 1.2);
    -webkit-filter: saturate(1.7) brightness(1.05);
    filter: saturate(1.3) brightness(1.07);
}
</style>

https://jsfiddle.net/mith1408/nmvozkhd/2/

更新。 没有transform，只有filter，这个bug继续出现。 因此，问题不在于组合:transform 和 filter。

UPD2. 看起来这是一个非常古老的错误，已修复但仅适用于被动元素。当您应用 :hover 时，错误会在过渡时刻再次出现。 Border radius and overflow hidden fail when CSS filter is applied in Chrome

来自旧主题的示例，修改为使用 :hover https://jsfiddle.net/mith1408/xk1hf3wq/3/

Answer 1

您的问题可能与堆栈上下文有关。两者 - 转换和过滤在应用时创建堆叠上下文。这是我的第一个想法。

您可以在这里阅读更多内容: MDN the stacking context

这里: stacking contexts: What they are and how they work