仅在 Chrome 中使用背景固定图像和 jquery.Animate 的错误

Posted 2023-05-08

【中文标题】仅在 Chrome 中使用背景固定图像和 jquery.Animate 的错误

【英文标题】：Bug only in Chrome using Background fixed images and jquery.Animate

【发布时间】：2015-04-03 23:47:59

【问题描述】：

我正在使用 jquery animate 和背景附件固定大小的封面图像创建一个向下滚动的 FX。问题是，当 DOM 加载时，bg 图像似乎没有完全加载，只显示了其中的一小部分。但这只发生在 Chrome 中。

调试结果：

1- 如果我检查元素，请关闭背景属性并再次打开它，图像将完全显示。

2- 如果我不使用 jquery animate，问题就消失了

所以它必须是 jquery.animate + 附件固定 bgs 的问题。首先我想到了一些由 animate 实现调用的 -webkit 属性，但在 Safari 中工作正常。

有什么想法吗？

PD：我现在不能发布代码，因为我已经签署了 NDA，但我会在项目上线的下周发布代码，以便让这个问题及其答案更有帮助，抱歉。

谢谢！

解决方案

我在这个主题中找到了几个很好的解决方案：

Fixed attachment background image flicker/disappear in chrome when coupled with a css transform

为了稍后解决这个问题，我做了一个 hack，在我的例子中，删除背景 div 的“position:relative”解决了这个问题。但这不是一个很好的解决方案，我建议阅读链接的帖子。

希望它可以帮助某人，包括 A. Wolff ;)

【问题讨论】：

我知道在这个社区提供代码的重要性，但我认为在这种情况下不需要考虑这个错误。我可以用 html 中的 div、背景 css 代码和带有 animate 的脚本给你写一个标记。但我认为报告的问题是清晰易懂的。

不是代码怀疑是css属性和jquery函数的兼容性问题，你的反对票是过度反应。

感谢输入！ ;)

【参考方案1】：

对于绝对定位的图像，在页面完全加载之前避免图像崩溃的一个好方法是根据原始图片的纵横比计算出底部填充百分比。 即填充底部=（图像高度/图像宽度）* Div 宽度

更多细节可以在这里找到： http://andyshora.com/css-image-container-padding-hack.html

请注意此网站描述，因为它建议： Padding Bottom = (Image Height / Image Width) * 100%，这需要是 Div 宽度以保持正确的纵横比。

为我在几个不同的情况下工作