仅使用背景修复图像和jquery.Animate在Chrome中出现错误

时间:2015-02-04 12:39:58

标签: jquery css google-chrome jquery-animate

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

调试结果:

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

2-如果我不使用jquery动画,问题就不存在了

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

有什么想法吗?

PD:我现在无法发布代码,因为我已经签署了NDA,但是我会在下周项目开始时这样做,以便提出这个问题并且这个问题是&#39 ; s答案更有帮助,抱歉。

谢谢!

解决方案

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

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

我做了一个黑客攻击以便稍后解决问题,在我的情况下删除"位置:亲属"背景div的黑客攻击了这个问题。但这不是一个很好的解决方案我建议阅读帖子链接。

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

1 个答案:

答案 0 :(得分:0)

对于绝对定位图像,在页面完全加载之前避免图像坍塌的好方法是根据原始图片宽高比计算出填充底部%。 即填充底部=(图像高度/图像宽度)* Div宽度

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

请注意这些网站的描述,因为它建议:  填充底部=(图像高度/图像宽度)* 100%,这需要Div宽度以保持正确的宽高比。

为我做了几个不同的实例