Closed Bug 1020394 Opened 10 years ago Closed 10 years ago

CSS background-image url() causes high CPU load

Categories

(Core :: General, defect)

x86_64
Windows 7
defect
Not set
normal

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.
Keywords: css1, css3, perf, reproducible
Summary: CSS takes a lot of CPU → CSS background-image url() causes high CPU load
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.
Keywords: css1, css3testcase-wanted
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 ?
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].
Resolving per comment 6. Thanks for following up!
Status: UNCONFIRMED → RESOLVED
Closed: 10 years ago
Resolution: --- → WORKSFORME
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.