animate() in Chrome triggers hundreds of HTTP requests

[cfinke]

Description

Using .animate() on an element with a background image causes Chrome to re-request the background image 60 times per second, but only if:

• Chrome is in Incognito mode.
• You refresh the page after the initial pageload.
• The CSS that sets the background image is in an external CSS file.

The avalanche of requests does not happen on the initial pageload -- only if you reload the page -- and the requests are always served from the in-memory cache of the image, so it's not actually placing load on the Web server, but the behavior seems... bad.

I've only been able to check this behavior in Chrome 95.0.4638.69 on Mac OS 11.6. The example uses jQuery 3.6.0, but I originally noticed it in a project that uses jQuery 2.2.4. Besides jQuery itself, the only JavaScript being run is

jQuery( function ( $ ) {
	$('#animate-me').animate({
	    'width' : '+=100',
	}, 5000, 'linear' );
} );

Link to test case

There is an example here: https://www.chrisfinke.com/files/jquery-animate-bug/

To reproduce:

1. Open a Chrome Incognito window.
2. Open the Developer Tools and select the Network tab.
3. Load the URL https://www.chrisfinke.com/files/jquery-animate-bug/ Note that the 5-second animation completes, and there are a total of four HTTP requests -- the HTML, the stylesheet, jQuery, and the background image (plus the favicon, potentially).
4. Reload the page by clicking the reload button. Note that this time, there are 300+ requests -- the same four as the original pageload, but an additional 300 requests for the background image.

This behavior persists even if the animation does not visibly affect the element on the page. For example, if instead of changing the width, it increases the font size (when there is no text in the element).

There are a couple of workarounds for anyone who is experiencing this bug in their own code:

1. Set the background image via an inline style attribute.
2. Set the background image via a <style> block in the HTML.

[dmethvin]

I'm not seeing this on Chrome 95.0.4638.69 (Official Build) (64-bit) Windows in Icognito. I hit reload and it gives the same number of requests. Do you have any proxies or strange networking setup? For example, a network-based ad blocking proxy.

[aidvu]

On Version 95.0.4638.69 (Official Build) (x86_64), here's a screencap:

I hit reload and it gives the same number of requests. Do you have any proxies or strange networking setup?

Try to load w/o cache, then just reload in the middle of animation. That's what did it for me.

[fecore1]

On Chrome 95.0.4638.69 Windows, I can reproduce this, and Incognito mode is not necessary.

And the problem may be caused by get bg.png from memory cache.

jquery/src/effects.js

Lines 25 to 35 in 4250b62

	function schedule() {
	if ( inProgress ) {
	if ( document.hidden === false && window.requestAnimationFrame ) {
	window.requestAnimationFrame( schedule );
	} else {
	window.setTimeout( schedule, jQuery.fx.interval );
	}
	jQuery.fx.tick();
	}
	}

window.requestAnimationFrame( schedule ); and jQuery.fx.tick(); will be invoked multiple times before the next repaint because inProgress is true until jQuery.fx.stop is invoked.

jquery/src/css.js

Line 254 in 4250b62

style[ name ] = value;

In jQuery.fx.tick(); , style['width'] will be set, which will cause the dom repaint, and background-image: url( 'bg.png' ); will get bg.png from memory cache

---

in my opinion, for the same request ( request bg.png), the browser will try to put all the changes together, execute them all at once. But for memory cache, chrome return image from memory for per request quickly, maybe chrome thinks it's fast from memory and optimization is not necessary.

But I can not find the relevant spec, or someone has a new explanation. .

[cfinke]

Confirming that I can now reproduce in a regular window (not incognito) as well.

[mgol]

I just returned to this. Is the issue still reproducible? No matter what I try, I don't see it on Chrome 106.0.5249.103 (x86_64) on macOS 12.6 (21G115).

[aidvu]

Yep, still reproducible. Check my comment up there.

• disable cache
• load it once
• enable cache
• just F5 in the middle of the animation

[mgol]

Your steps didn't work for me but after a few refreshes it suddenly kicked in. Very weird.

In any case, the element stays in the DOM so it's Chrome that triggers the requests, not jQuery code. I don't see how we could bypass it. Maybe it's worth reporting that to the Chromium project at https://crbug.com?