Strange CSS issues on Full width background image

Question

I have a one-page site with full-width background images on each section that hold their fixed position while the content scrolls. Sometimes when the page loads, the background images load very strange (I can't even explain what they're doing, see screenshot: http://bryanzwicker.com/imgs/bg-screenshot1.jpg )

This only happens once in a while (about once every 10 refreshes) and primarily on Chrome. I got the frequency to go down by writing a simple js script that scrolls down then back to the top of the page when the bg image is loading, and it seems to happen more often when someone is scrolling (intensely) while the page loads.

This is such a strange issue I don't even know where to begin to look. Any suggestions? I'm open to anything that is very "hack"ish.

URL: http://nasimandnima.com/

Any help is greatly appreciated, I'm stumped! Thanks!

Answer 1

Seems most likely just a browser performance issue. One possible way to mitigate is to use a lower-quality background image -- try a lower compression setting for a .jpg image, if that's what it is.