Jquery 仅限OSX Firefox中的CSS混合模式错误

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

链接到我的网站：

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

$（“集合-53a70027e4b0c63fc41ac520.幻灯片：第n个子项（9）”）.css（“背景”，“ff0000”）； $（“#集合-53a70027e4b0c63fc41ac520.幻灯片：第n个子（9）img”）.css（“混合模式”，“屏幕”）

你对这一款浏览器会发生什么有什么想法吗

编辑：

作为对下面IMI的回应，这个问题似乎与混合模式的目标没有任何关系。如果突出显示初始页面上的图像，或索引页面上的任何图像，则在滚动页面时将获得相同的疯狂效果。这似乎是Firefox的混合模式问题

编辑：添加了可视化混合模式渲染问题的屏幕截图。在调整页面大小时可以很容易地看到。

---

新更新-2015年9月18日-另一个解决方案（可能更好）： 这个问题似乎也可以通过强制浏览器在具有

混合模式的元素上使用GPU加速来解决。此解决方案不会像
边框：1px
解决方案那样更改布局

而不是使用：

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

使用此命令强制GPU加速（）：


旧（已接受）答案：

好的，我认为你发布的代码很好。我认为问题在于你用来调整图像大小的脚本。当我添加
填充时：1px到
。幻灯片
问题停止了，至少对我来说是这样

我建议停止使用JS将幻灯片图像大小更改为固定像素值，而是将幻灯片图像css更改为相对值
宽度：100%；高度：自动。这样，FF应始终计算父对象中包含的图像，并根据需要应用混合


编辑：使用图像边框的另一种方法

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

您也可以仅通过使用CSS文件中的
@-moz文档
来尝试瞄准firefox

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

这对我来说适用于你网站上使用
混合模式的每一张图片。默认情况下，将其放在
.slide.img
上，您无需担心将其应用于
第n个子元素，1px白色边框将几乎没有视觉影响，因为您的页面背景是白色的。你只需要知道你的图像在布局中右移了1px。但是如果你不告诉他们，我想没有人会注意到。
你在OSX上尝试过在FF中更改文档模式吗？我还没有尝试过，也不太熟悉如何更改（我不是web开发人员！），但我会研究一下。谢谢@David-您可能需要更新您的问题链接以转到您的“考古博物馆”页面，因为这是您的jquery代码所指的页面。谢谢IMI。Squarespace的独特之处在于，你可以将页面作为目标，显然是在后端使用了一些魔法，但他们建议使用#collection-tag。页面定位似乎在所有浏览器上都能正常工作，我认为具体问题与混合模式有关。如果这可能是问题所在，我将尝试将一些其他CSS属性设置为特定图像，而不是混合模式作为测试。@David-我在与链接的页面不同的页面上找到了列出的ID。我更新了我的答案。哇，真的很有趣，非常感谢。我尝试了填充：1px，这似乎有效，但它留下了彩色背景显示在顶部和左侧，这是我无法修复的。但是，用光标选择一个图像，然后在我的索引页上滚动，仍然会产生同样的错误。真倒霉JS的大小调整与SS模板紧密相连，我认为我在这方面的能力非常有限。我将研究报告这个mozilla在任何情况下…是否有其他一些方法来保持内容在父级的范围内，而不创建背景流血通过边缘？我尝试了溢出：隐藏在幻灯片上，但没有运气…@David-我用一种在幻灯片图像上使用边框的方法更新了我的答案。
@-moz-document url-prefix() {
  .slide img {border: 1px solid white;}
}