Maximum background repetition in Google Chrome?

Question

I'm getting a weird behaviour in my blog, only in Google Chrome. (This is a CSS/browser thing, nothing to do with the server component, Blogger, Wordpress, etc).

The home page for it is admittedly too long, and what i'm getting is that the background on my main "container" element stops repeating after a certain height, but only in Google Chrome.

You can see it at http://www.lejanooriente.com (warning: it's a heavy page with a lot of pictures, takes a while to load)

If you let this page load completely and look at it in any browser and in Chrome, you'll see that in "any" browser it looks right, and in Chrome something is obviously off. If you scroll all the way to the bottom, it looks right, though. Try scrolling up, and at one point you'll notice the background "ends" (about 30% - 40% from the bottom).

According to FireBug, the element that has the background is 78,472 px tall. It IS way too tall, and in pages that are reasonably long, this effect is not seen.

Strangely enough, this happens in Chrome but not in Safari.

I tried making the background image taller, to try and figure out whether I was getting limited by the height of the element, or the number of times the background got repeated. Changed the image from 30px to 90px tall, and the cutoff is exactly at the same place, so that's not it.

Any ideas what could be going on, or whether there's something I can do to fix it? (Making the page less long is not an option)

---

UPDATE: Bug reported, issue 9661. If anyone can think of some kind of workaround for this, however, that'd be awesome.

Answer 1

This is definitely a chrome bug and you just need to report it and wait for solution. I checked your page in Safari, which uses same engine as Chrome (Webkit), and the page works fine.

My good advice is to not create such long pages, because it is not only bad for Chrome, but also for your's site visitors.

There is a workaround for this bug by using background position fixed:

#page { background: url(/images/tile_left.gif) repeat-y fixed 50% 50%; }