www.reddit.com - see bug description

[webcompat-bot]

URL: https://www.reddit.com/r/soccer/

Browser / Version: Firefox 58.0 Operating System: Windows 10 Tested Another Browser: Yes

Problem type: Something else Description: The site uses a lot of cpu after it loads completely Steps to Reproduce:

layout.css.servo.enabled: true

From webcompat.com with ❤️

[karlcow]

Another comment talking about CPU which is probably related to the banner and its animations setting.

@hiikezoe Probably a similar issue than #12417

.titlebox h5 {
 display:none
}
.titlebox h5+ul {
 list-style:none
}
.titlebox h5+ul li {
 display:inline
}
.titlebox h5+ul a {
 display:block;
 position:absolute;
 left:2px;
 top:21px;
 background-size:cover;
 background-position:0;
 opacity:0;
 z-index:0;
 overflow:hidden;
 -webkit-animation:banner1 40s linear infinite;
 animation:banner1 40s linear infinite
}
.titlebox h5+ul li:nth-child(5) a {
 opacity:1;
 z-index:1;
 background-image:url("//b.thumbs.redditmedia.com/GQRjEtuUjO7BpwiY0NLK0P_oP9zji_lGOJs9ROz1c5E.jpg")
}
.titlebox h5+ul li:nth-child(4) a {
 background-image:url("//b.thumbs.redditmedia.com/QJCb0wTaegHNlZR6sW1rJX27Fy5nrUQtRi5KADPEtAg.jpg");
 -webkit-animation-name:banner2;
 animation-name:banner2
}
.titlebox h5+ul li:nth-child(3) a {
 background-image:url("//a.thumbs.redditmedia.com/c9_HJ7kiBMT3rk_V8-bap0L4GRNrYKRbulRnN3B-4L4.jpg");
 -webkit-animation-name:banner3;
 animation-name:banner3
}
.titlebox h5+ul li:nth-child(2) a {
 background-image:url("//a.thumbs.redditmedia.com/WtfZJaZKr3bUykURlw3zXLSUfY0D2U-NzB5bGBLy0H4.jpg");
 -webkit-animation-name:banner4;
 animation-name:banner4
}
.titlebox h5+ul li:nth-child(1) a {
 background-image:url("//b.thumbs.redditmedia.com/h7s3EKUaoDu7sahQ4XcEpPa1acqvciBYaWjKgenM-JE.jpg");
 -webkit-animation-name:banner5;
 animation-name:banner5
}
@keyframes banner1 {
 16% {
  opacity:1
 }
 20% {
  opacity:0;
  z-index:1
 }
 21% {
  z-index:0
 }
 95% {
  z-index:0
 }
 96% {
  opacity:0;
  z-index:1
 }
}
@keyframes banner2 {
 16% {
  opacity:0;
  z-index:1
 }
 20% {
  opacity:1
 }
 36% {
  opacity:1
 }
 40% {
  opacity:0;
  z-index:1
 }
 41% {
  z-index:0
 }
}
@keyframes banner3 {
 36% {
  opacity:0;
  z-index:1
 }
 40% {
  opacity:1
 }
 56% {
  opacity:1
 }
 60% {
  opacity:0;
  z-index:1
 }
 61% {
  z-index:0
 }
}
@keyframes banner4 {
 56% {
  opacity:0;
  z-index:1
 }
 60% {
  opacity:1
 }
 76% {
  opacity:1
 }
 80% {
  opacity:0;
  z-index:1
 }
 81% {
  z-index:0
 }
}
@keyframes banner5 {
 1% {
  z-index:0
 }
 76% {
  opacity:0;
  z-index:1
 }
 80% {
  opacity:1
 }
 96% {
  opacity:1
 }
 100% {
  opacity:0;
  z-index:1
 }
}

[karlcow]

This seems to have been fixed by the latest improvements in Gecko.