Html 影响Mac Chrome上其他元素的CSS混合模式

这是一个有点难的问题，因为这个问题可能是复杂WordPress页面上的许多事情

为我认为可能存在的问题制造麻烦并没有复制这个问题

目前，问题所在页面的摘录就足够了，因此在考虑否决该问题之前，请知道，一旦我知道触发错误的根本原因，我打算用小提琴更新该问题。为了更大的利益，提前感谢您允许稍微暂时改变规则

请注意，我将开始慢慢地删减元素，直到只剩下问题，或解决问题，或在这里提供答案，以先到者为准

临时问题

一般来说：混合模式会影响Mac上Chrome中的父元素。它似乎会影响延伸到页面之外和/或固定的元素。可能与绝对定位的元素有某种关系。这一切在现阶段听起来有点模糊，但我正在接近找到答案，因此是一个更好的问题

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

示例

以下是WordPress管理栏受到影响的内容。当您将鼠标悬停在元素上时，黑色管理栏会闪烁

我举了一个例子，提取HTML和CSS，然后删除元素，直到问题停止发生，然后将删除的元素倒回一个元素，使问题仍然存在

额外的

更为复杂的是，这一问题有些间歇性，具有一定程度的“观察者效应”。检查元素有时可以解决问题

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

---

再次感谢。我期待着——不仅是找到答案，而且是改进问题。

这并没有严格回答问题是什么——因为这显然是一个bug——或者确切的CSS原因和解决方法是什么。我相信有更好的答案，一旦找到，我会很高兴地把它标记为正确的

然而，就目前而言

这是一个解决办法：

不要在元素的悬停前状态上设置混合模式

相反，将混合模式设置为悬停状态，默认过渡时间为零。然后仅在“背景”属性上设置过渡时间

---

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

我正在macOS 10.12.4上运行Chrome 57.0.2987.133。没有混合问题，但是弹出窗口有很多奇怪之处——它们有一半的时间是部分透明的，悬停在弹出图像上会导致整个弹出窗口闪烁。打开Chrome Inspector可以修复所有问题并防止问题发生。顺便说一句，该页面的加载速度非常慢。我甚至不想调试它。每次装载花费1.6分钟。您对问题的描述是正确的。它确实显示为不透明度问题，并闪烁。我以为是混合的。不管是什么，都不应该是这样。重新。加载时间：请一次做一件事：）我刚刚做了一个PingDom测试。页面只有1.2mb，但从达拉斯加载需要15秒。但是，它会在4秒钟内从目标受众南非内部的干净缓存中加载。在我的回答中，我将包括一个更快的例子。我似乎无法重现这种行为：没有不透明的怪异和闪烁的问题。在Chrome 56和57、Windows 10上测试