Question

我在Jquery幻灯片中将CSS混合混合模式效果应用于某些图像。这适用于我测试的所有浏览器，包括Windows上的Firefox，但不适用于OSX上的Firefox。似乎混合混合模式应用于整个幻灯片放映，而不是指定的图像，并且所有图像一次混合在一起。

链接到我的网站：http://bit.ly/1hDawdu

请注意，这是在Squarespace页面上。这是我的Jquery代码的一个示例，它将效果应用于特定页面上幻灯片中的第9张幻灯片：

$（＆＃34;＃collection-53a70027e4b0c63fc41ac520 .slide：nth-child（9）＆＃34;）。css（＆＃34; background＆＃34;，＆＃34;＃ff0000＆＃34;）; $（＆＃34; #collection-53a70027e4b0c63fc41ac520 .slide：nth-child（9）img＆＃34;）。css（＆＃34; mix-blend-mode＆＃34;，＆＃34; screen＆＃34;）;

对于这个浏览器可能会发生什么的任何想法？

编辑：

根据下面的IMI，该问题似乎与混合混合模式的目标无关。如果您在启动页面上突出显示图像，或在“索引”页面上突出显示任何图像，则在滚动页面时将获得相同的疯狂效果。这似乎是Firefox的混合混合模式问题。

编辑：添加了视觉混合模式渲染问题的屏幕截图。页面调整大小时可以轻松看到。

Answer 1

NEW UPDATE - 2015年9月18日 - 另一种解决方案（可能更好）： 通过强制浏览器对具有mix-blend-mode的元素使用GPU加速，似乎也解决了这个问题。此解决方案不会像border:1px解决方案那样更改布局。

而不是使用：

.slide img {border: 1px solid white;}

使用此方法强制GPU加速（Reference Link）：

.slide img {
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);
}

旧（已接受）答案：

好的，我认为您发布的代码很好。我认为问题是您用来调整图像大小的脚本。 Firefox seems to have a rendering problem with mix-blend-mode images that are not contained in their parent.当我向padding: 1px;添加.slide时，问题就会停止，至少对我而言。

我建议停止使用JS将幻灯片图片大小更改为固定像素值，而是将幻灯片图片css更改为width:100%;height:auto;的相对值。这样，FF应始终计算父项中包含的图像，并根据需要应用混合。

Here is a link to another FF mix-blend-mode known bug. You may even want to report your issue here as it may be related.

编辑：另一种在图片上使用边框的方法。

.slide img {border: 1px solid white;}

您也可以尝试使用CSS文件中的@-moz-document hack来定位Firefox。

@-moz-document url-prefix() {
  .slide img {border: 1px solid white;}
}

这适用于您使用mix-blend-mode的网站上的每张图片。默认情况下，将其设置为.slide .img，您无需担心应用nth-child元素，因为您的页面背景为白色，因此1px白色边框几乎没有视觉效果。您将只需要了解您的图像在布局中右移1px的知识。但我不认为如果你不告诉他们，任何人都会注意到。

仅限OSX Firefox中的CSS mix-blend-mode错误

1 个答案: