Closed
Bug 1020394
Opened 10 years ago
Closed 10 years ago
CSS background-image url() causes high CPU load
Categories
(Core :: General, defect)
Tracking
()
RESOLVED
WORKSFORME
People
(Reporter: a3357618, Unassigned)
References
()
Details
(Keywords: perf)
User Agent: Mozilla/5.0 (Windows NT 6.1; WOW64; rv:29.0) Gecko/20100101 Firefox/29.0 (Beta/Release)
Build ID: 20140506152807
Steps to reproduce:
1. Monitor CPU consumption
2. Go there: http://www.japan-activator.com/fr/lessons/lesson/index/id/3/page/4
3. As soon as you reach the first table in the "Copule DESU" paragraph, CPU consumption gets out of hand
4. Open Inspector (CTRL+SHIFT+I)
5. Select the table.lecon element
6. Disable any of its CSS rule
7. Re-enable it
8. CPU load gets back to normal
Actual results:
High CPU consumption
Expected results:
Barely any CPU consumption
I encountered the same issue on another site using Firefox 30.
I'll redo the steps tweaked for the new site so you can locate the problematic CSS rule. Hopefully you guys can reproduce it because both sites I discovered and started using heavily just recently. I never ever noticed such a CSS bug before, but I never went to these sites either.
1. Monitor CPU consumption
2. Go there: http://www.memrise.com/courses/english/
3. If necessary, scroll down until the screen area displays a small icon representing a person with a tie.
4. Open Inspector
5. Select the small square that contains the icon
6. Disable the only rule listed for elements:
.ico, a.audio-player, .ico.ico-active-states:active, a.ico-active-states.audio-player:active
7. Notice how CPU load gets back to normal
8. Re-enable the rule, CPU stays sane, just like for the other site.
Good you guys at least acknowledge you're having that issue or not, because it's really really bugging me as I use both sites a LOT.
Thanks!
Actually I narrowed both issues down to the background / background-image CSS rule:
url('/* Image URL */');
You can verify this with the following Adblock Plus rules:
||static.memrise.com/img/sprites/icons-grey-dark.v1.png
||www.japan-activator.com/images/bg_table_blue.jpg
With those there will be no CPU spike to begin with.
Summary: CSS takes a lot of CPU → CSS background-image url() causes high CPU load
Comment 3•10 years ago
|
||
Reduced the DIVs style of the http://www.memrise.com/courses/english/ case, but something else (missing) in conjunction is causing the high CPU usage.
Version: 29 Branch → Trunk
There needs to be at least two instances of the problematic background appearing on screen for the problem to trigger.
Maybe that's the something else you're looking for ?
Comment 5•10 years ago
|
||
http://www.japan-activator.com/fr/lessons/lesson/index/id/3/page/4 seems to require a login.
http://www.memrise.com/courses/english/ does not have any obvious issues for me, but maybe it's just that I have a fast computer and/or a different OS.
A static testcase page (even if not a minimized testcase) and a profile from https://developer.mozilla.org/en-US/docs/Mozilla/Performance/Profiling_with_the_Built-in_Profiler might help.
Product: Firefox → Core
This problem persisted through Firefox 31, 32, 33 and 34.
As of Firefox 35 it is fixed on both websites, I guess as an indirect result of the "Improved handling of dynamic styling changes to increase responsiveness" bit in the [url=https://www.mozilla.org/en-US/firefox/35.0/releasenotes/]release notes[/url].
Comment 7•10 years ago
|
||
Resolving per comment 6. Thanks for following up!
Status: UNCONFIRMED → RESOLVED
Closed: 10 years ago
Keywords: reproducible,
testcase-wanted
Resolution: --- → WORKSFORME
Comment 8•7 years ago
|
||
Moving from Core::Untriaged to Core::General https://bugzilla.mozilla.org/show_bug.cgi?id=1407598
Component: Untriaged → General
You need to log in
before you can comment on or make changes to this bug.
Description
•