CSS3不透明度过渡，铬不褪色背景图像答案

【问题标题】：CSS3 Opacity transition, chrome not fading background-imageCSS3不透明度过渡，铬不褪色背景图像
【发布时间】：2013-07-05 22:20:28
【问题描述】：

我正在制作我的作品集，我正在尝试一些淡入淡出的视差效果。

我更喜欢动画的 CSS3 过渡，我只使用 Jquery 路径点来触发它。

在 Firefox 中淡入效果很好，整个 div 淡入，但在 Mac 上的 Chrome 和 Safari 中，div 的背景图像不会淡入，它只是跳入。

例如检查（模糊的部分应该淡入） http://www.jasperaarts.com/2013/#work

我添加或删除类 active_item 或 inactive_item 以触发 CSS 转换。

.active_item {

    -webkit-opacity: 1.0;
    -moz-opacity: 1.0;
    -ms-opacity: 1.0;
    -o-opacity: 1.0;
    opacity: 1.0;

    -webkit-transition: opacity 1000ms ease 500ms;
    -moz-transition: opacity 1000ms ease 500ms;
    -ms-transition: opacity 1000ms ease 500ms;
    -o-transition: opacity 1000ms ease 500ms;
    transition: opacity 1000ms ease 500ms;
}
.inactive_item {

    -webkit-opacity: 0;
    -moz-opacity: 0;
    -ms-opacity: 0;
    -o-opacity: 0;
    opacity: 0;
}

我尝试过的替代方法是 Jquery fadeIn 和 fadeOut 或 Jquery 中的 Animate css 都显示类似的结果。

【问题讨论】：

奇怪，这似乎不是过渡的问题，而是不透明度和背景附件属性的问题。您会注意到，即使您移除过渡并将不透明度设置为 0.9，背景图像也不会显示，但如果移除 background-attachment: fixed 属性，它也可以正常工作。
感谢您为我指明了正确的方向，但我确实需要背景附件：已修复；用于动态重新定位背景的视差效果。
Chrome 和 Safari 在使用背景附件时不支持褪色背景图像是否有正当理由：已修复？或者这是一个浏览器错误，因为在 Firefox 中代码可以完美运行。
看起来这是一个错误，可能与 web-kit 相关。当我尝试在另一个页面上重现它时，我不能，但是当我从您的页面中删除该属性时，它解决了这个问题。我尝试了一段时间，但无法进一步缩小范围。我建议尝试通过从页面中删除所有内容并构建到中断的点来缩小范围，如果它是一个错误报告给 web-kit 团队。如果一切都失败了，您应该能够使用绝对定位的图像。
我以为我尝试了一切，直到我禁用了 Isotop.js 脚本，淡入淡出再次起作用。再次感谢

标签： jquery macos google-chrome safari css-transitions

【解决方案1】：

感谢 Godwin，我已将其范围缩小到与 Isotope.js 脚本和 Parallax css 的兼容性问题。

【讨论】：