Seeking Advice
I'm in need of some help with identifying whether the code I'm working on is causing high CPU usage in Firefox or if it's a bug inherent to the browser itself. The situation is getting frustrating, and I've run out of solutions. Hardware acceleration is turned on in Firefox.
Experimentation with the same animation in Chrome, Chromium, and PaleMoon has shown no issues. CPU consumption remains relatively stable in these browsers even after prolonged use. However, once the animation begins in Firefox, CPU usage spikes to over 90% immediately and continues to climb (even when the tab is closed) until hitting 100%. Shutting down Firefox entirely seems to be the only way to alleviate this issue.
Device Specifications
My setup consists of a laptop equipped with an Intel core i7-4700mq processor, 16 GB RAM, a 500 GB SSD, and a 1 TB HDD.
Operating on Kubuntu 16.04 (with the KDE Project Neon repository enabled) and upgraded to kernel version 4.10.10.
Slideshow Description
The slideshow function involves:
- Fading in of an image.
This effect is achieved through jQuery fadeIn().
- Zooming in of the image.
A CSS3 transition is responsible for scaling the image. A jQuery-assigned class alters the image’s dimensions to 120% width and positions it at -10% from the left.
Eliminating this step results in smooth animation playback without affecting Firefox's CPU utilization.
- Fading out the image after a specified time interval.
This action employs jQuery fadeOut(). Once the image-containing div fades out, the zoom-in CSS class assigned to the image is removed.
- Fading in a new image while the previous one fades out.
Accomplished using jQuery fadeIn(), adding the zoom-in CSS class to the newly displayed image.
Functional Example
You can view a functional sample of the slideshow on CodePen.
Markup
HTML
<div class="slideshow">
<div class="slide" id="slide-1">
<img class="slide-img" id="slide_img-1" data-src="https://upload.wikimedia.org/wikipedia/commons/5/5a/Proboscis_monkey_%28Nasalis_larvatus%29_female_Labuk_Bay.jpg"/>
</div>
<div class="slide" id="slide-2">
<img class="slide-img" id="slide_img-2" data-src="https://upload.wikimedia.org/wikipedia/commons/b/b9/Saffron_finch_%28Sicalis_flaveola%29_male.JPG"/>
</div>
</div>
CSS
.slideshow{
width: 100%;
overflow: hidden;
}
.slide{
width: 100%;
overflow: hidden;
position: absolute;
text-align: center;
background-position: center;
background-repeat: no-repeat;
}
.slide img{
position: relative;
margin-left:0px;
width:100%;
min-width:100%;
transition: all 8s;
}
.slide_zoom{
width: 120%!important;
margin-left: -10%!important;
}
Javascript
var current=1;
var prev=1;
var counter=0;
var slide_duration=8000;
var transition_duration=700;
var interval;
var width=($(window).width()+200)+'px';
$(function(){
function slideshow_play(){
console.log(current);
$('#slide-'+current).fadeOut(transition_duration,function(){
$('#slide_img-'+prev).removeClass('slide_zoom');
});
prev=current;
if (current<$('.slide').length){
current=current+1;
}
else{
current=1;
}
$('#slide-'+current).fadeIn(transition_duration, function(){
$('#slide_img-'+current).addClass('slide_zoom');
});
}
$('.slide').each(function(){
var img=$(this).find('img');
var src=$(img).data('src');
var image=new Image();
image.src=src;
image.onload=function(){
counter+=1;
img.prop('src', this.src);
if (counter==($('.slide').length)){
$('#slide-'+current).fadeIn(500);
var timeout=window.setTimeout(function(){
$('#slide_img-'+current).addClass('slide_zoom');
interval=window.setInterval(function(){ slideshow_play(); }, slide_duration);
},500);
}
}
});
});