css - 带有 Bootstrap 的混合混合模式在 safari 中不起作用

Question

我想将 bootstrap-navbar 的混合模式设置为“差异”，但 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(); 也没有。

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