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 comment:1
| resolution: | → notabug |
|---|---|
| status: | new → closed |
Changed May 31, 2013 01:58PM UTC by 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 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.
Please ask for help on a forum.