mix-blend-mode与bootstrap在safari中不起作用

Question

我想将bootstrap-navbar的混合模式设置为＆＃34;差异＆＃34;但是id在Safari中不起作用......

.navbar{
  background:none;
  mix-blend-mode: difference
}

https://jsfiddle.net/7y3ccomo/12/

然而，一个简单的演示工作。

.blender{
  font-size: 150px;
  color: red;
  mix-blend-mode: multiply;
}

https://jsfiddle.net/sqqkccgn/

任何人都有线索？

谢谢！

Answer 1

你能看看这个https://jsfiddle.net/7y3ccomo/15/吗？

$(document).ready(function() {
    $('body').hide().fadeIn();
});

我注意到点击第一个示例的预览区域（在OSX Safari中）显示了背景。

所以我尝试添加一个javascript / jQuery来隐藏身体一次，然后fadeIn()来显示背景。但是$('body').hide().show()不起作用。 $('body').fadeIn();也没有。

我知道它根本不是一个优雅的解决方案。我希望其他人能尽快找到更好的技巧或解决方法。