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

时间:2017-04-05 14:22:11

标签: html css mix-blend-mode

创建一个小提琴是一个很难的问题,因为问题可能是复杂的WordPress页面上的任何问题。

为我认为可能存在的问题创造一个小提琴并没有复制这个问题。

目前,发生问题的页面的摘录必须足够,所以在考虑关注问题之前,请知道我打算用小提琴更新问题一旦我知道根本原因是什么触发了这个bug。提前感谢您允许稍微弯曲规则并暂时获得更大的好处。

请注意,我将开始缓慢消除元素的过程,直到问题仍然存在,或者解决,或者在这里提供答案,以先到者为准。

临时问题

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

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

示例

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

我通过提取HTML和CSS,然后删除元素直到问题停止发生,然后将一个元素重新删除以使问题保持​​不变来创建该示例。

附加

为了使事情变得更复杂,这个问题在某种程度上“观察员效应”有些间歇性。检查元素有时可以解决问题。

我很确定这是Mac Chrome特有的错误,但在一年多的更新中尚未得到解决。它不会出现在Firefox,Safari或Windows版本的Chrome中。

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

1 个答案:

答案 0 :(得分:0)

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

但是,现在......

这可以解决方法:

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

而是在悬停状态下设置mix-blend-mode,默认转换时间为零。然后专门在background属性上设置转换时间。

这样闪烁的bug就是即时的,因此不可见。