html - 影响 Mac Chrome 上其他元素的 CSS mix-blend-mode

Question

这个问题有点难解决，因为这个问题可能是一个复杂的 WordPress 页面上的任何数量的东西。

为我认为可能是问题的问题创建 fiddle 并没有重现问题。

现在，出现问题的页面的摘录就足够了，所以在考虑否决这个问题之前，请知道一旦我知道根本原因是什么，我打算用 fiddle 更新问题触发错误。提前感谢您允许为了更大的利益而稍微和暂时地改变规则。

请注意，我将开始逐步削减元素，直到只剩下问题、解决问题或在此处提供答案，以先到者为准。

临时问题

一般来说:mix-blend-mode 会影响 Mac 上 Chrome 中的父元素。它似乎影响了超出页面范围和/或固定的元素。可能与绝对定位的元素有某种关系。在这个阶段，这一切听起来有点模糊，但我越来越接近找到答案，因此是一个更好的问题。

我会在 Google 的论坛上提交错误报告，尽管值得指出的是这确实有一个 CSS 解决方法，所以这个问题仍然相关。大约 6 个月前，我设法在另一个网站上解决了这个问题。不幸的是，该网站已不存在，所以我无法找到我是如何修复它的。

示例

这里是 a partially stripped-down page WordPress 管理栏受到影响。当您将鼠标悬停在元素上时，黑色管理栏会闪烁。

我通过提取 HTML 和 CSS 来制作该示例，然后删除元素直到问题不再发生，然后将我的删除倒回一个元素以使问题仍然存在。

额外

让事情变得更复杂的是，这个问题有点断断续续，带有一定程度的“观察者效应”。检查元素有时可以解决问题。

我很确定这是一个特定于 Mac Chrome 的错误，尽管它在一年多的更新中仍未得到解决。它不会出现在 Firefox、Safari 或 Windows 版本的 Chrome 中。

再次感谢。我很期待 - 不仅要找到答案，还要改进问题。

Answer 1

这并没有严格回答问题是什么——因为它显然是一个错误——也没有回答确切的 CSS 原因和解决方法。我确信有更好的答案，一旦找到，我会很乐意将其标记为正确。

但是，现在..

这是一种解决方法:

不要在元素的悬停前状态设置 mix-blend-mode。

改为在悬停状态上设置 mix-blend-mode，默认过渡时间为零。然后仅在背景属性上专门设置过渡时间。

这样闪烁错误是即时的，因此不可见。