2

I'm creating a scroll down FX using jquery animate and background attachement fixed's size cover images. The problem is that the bg images seems to doesn't fully load when the DOM is loading, displaying only a little part of them. But this only happens in Chrome.

Debugging results:

1- If I inspect the element, turn off the background property and turn it on again the image is fully displayed.

2- If I don't use jquery animate, the issue is gone

So it has to be a problem with jquery.animate + attachment fixed bgs. Firts I thought about some -webkit property called by the animate implementation, but in Safari works fine.

Any thoughts?

PD: I can't post the code right now cause I've signed a NDA, but I will do it the next week when the project is live, in order to make this question and it's answers more helpfull, sorry.

Thanks!

Solutions

I've found a couple of great solutions in this topic:

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

I did a hack in order to fix the issue later, in my case deleting the "position:relative" of the backgrounded div hacked the problem. But is not a great solution I recomend to read the post linked.

Hope it could help somebody, A. Wolff included ;)

Community
  • 1
  • 1
nach
  • 349
  • 1
  • 3
  • 10
  • I know the importance of providing code in this community but I think in this case is not needed to think about the bug. I can write you a markup with a div in html, a background css code and an script with animate. But I think the issue reported is clear and understandable. – nach Feb 04 '15 at 12:51
  • Is not a code doubt is a compatibility issue between a css property and a jquery function, and your negative vote is an over-reaction. – nach Feb 04 '15 at 12:52

1 Answers1

0

With absolute positioned images, a good way to avoid image collapse before the page fully loads is to work out a padding bottom % based on the original pictures aspect ratio. i.e. Padding Bottom = (Image Height / Image Width) * Div Width

More details can be found here: http://andyshora.com/css-image-container-padding-hack.html

Be careful with this sites description though because it advises: Padding Bottom = (Image Height / Image Width) * 100%, This needs to be Div width to maintain correct aspect ratio.

Worked in a few different instances for me

George D
  • 421
  • 5
  • 6