Skip to main content

Bug Tracker

Side navigation

#13970 closed bug (notabug)

Opened May 31, 2013 10:41AM UTC

Closed May 31, 2013 01:09PM UTC

Last modified May 31, 2013 02:04PM UTC

slow fadeIn / fadeOut make browsing painful

Reported by: devel@baptiste-carvello.net Owned by:
Priority: undecided Milestone: None
Component: unfiled Version: 1.10.1
Keywords: Cc:
Blocked by: Blocking:
Description

Hello,

with my desktop (config. below), jQuery fadeIn / fadeOut can take up to 9 seconds (maximum value, really measured with a stop-watch). As Firefox is completely frozen in the meantime, this makes browsing extremely painful on any website using animated images (included header/advertizing banners).

Config:

Debian squeeze distribution

Firefox from Debian squeeze-backports: Mozilla/5.0 (X11; Linux x86_64; rv:10.0.12) Gecko/20100101 Firefox/10.0.12 Iceweasel/10.0.12

ATI radeon r300 graphic card (yes, this is old, but more than enough for bloody webpage browsing)

Test case (minimized from real-life example www.senat.fr):

<!DOCTYPE HTML PUBLIC "-W3CDTD HTML 4.01 TransitionalEN" "http:www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" >

<link rel="stylesheet" type="text/css" href="base.css">

</head>

<body>

<div id="header"> </div>

<script src="base.js" type="text/javascript"></script>

</body>

</html>

where base.js is (I snipped compressed jQuery, tested with your original v1.10.1 download):

/*! jQuery v1.10.1 | (c) 2005, 2013 jQuery Foundation, Inc. | jquery.org/license

//@ sourceMappingURL=jquery-1.10.1.min.map

*/

/*

  • JQUERY COMPRESSED CODE WAS HERE
  • */

jQuery(document).ready(function(){

animateHeader();

});

var rand_value = 1;

var rand_items = 13;

function animateHeader() {

if(jQuery('#header #background').length < 1 ){

jQuery('#header').append('<div id="background"></div>');

}

jQuery('#header #background').fadeOut('slow', function(){

if(rand_value > rand_items)

rand_value = 1;

jQuery('#header #background').removeClass();

jQuery('#header #background').addClass('background-'+rand_value+'');

jQuery('#header #background').fadeIn('slow');

rand_value++;

});

setTimeout("animateHeader()",8000);

}

and base.css is:

body {

font-family: "Times New Roman", Times, serif;

font-size: 87.5%; /* :INFO:1em = 14px */

text-align: center;

margin: 0;

height: 100%;

color: #545454;

background: #d1dae0;

width: 962px;

min-height: 400px;

height: auto !important;

height: 400px;

}

#background {

position: absolute;

z-index: 1;

left: 0;

top: 0;

height: 147px;

width: 982px;

background-image: url(background.jpg); /* width: 982px, height: 1911px */

background-repeat: no-repeat;

}

.background-1 {

background-position: 0 0;

}

.background-2 {

background-position: 0 -147px;

}

.background-3 {

background-position: 0 -294px;

}

.background-4 {

background-position: 0 -441px;

}

.background-5 {

background-position: 0 -588px;

}

.background-6 {

background-position: 0 -735px;

}

.background-7 {

background-position: 0 -882px;

}

.background-8 {

background-position: 0 -1029px;

}

.background-9 {

background-position: 0 -1176px;

}

.background-10 {

background-position: 0 -1323px;

}

.background-11 {

background-position: 0 -1470px;

}

.background-12 {

background-position: 0 -1617px;

}

.background-13 {

background-position: 0 -1764px;

}

Attachments (0)
Change History (3)

Changed May 31, 2013 01:09PM UTC by dmethvin comment:1

resolution: → notabug
status: newclosed

Please ask for help on a forum.

Changed May 31, 2013 01:58PM UTC by devel@baptiste-carvello.net comment:2

So, fundamentally, jQuery is DOSing an end-user computer by not adapting its redraw rate to the hardware, and this is not a bug? Really? Next time, I won't waste my time producing a minimal test case.

Changed May 31, 2013 02:04PM UTC by dmethvin comment:3

Your test case will be fine for getting help on the forum, at least as a starting place. The jQuery core team can't provide personalized help for every person who writes code that doesn't work right. You haven't reduced that code to the point where you've proven there is a bug in jQuery.