High memory usage that jumps from 700 MB to 2000 MB
No better way to reproduce this than testing a link in 3 browsers:
Test link: http://themes.mediacreed.com/html/synergy/#portfolio.html
Test steps:
1) Click on the left arrow on the top left corner to activate hide/show menu. See image 1( green selection ) 2) Move the mouse over the menu( it opens the menu) 3) Move the mouse out of the menu area it hides the menu.
Repeat steps 2 and 3 as fast as you can and watch firefox memory increasing( I used Task Manager, Windows 8.1)
Firefox 44.0.2: - Started from 700 MB and reached 2000 MB
IE 11: - Started at 50MB and reached 70 MB
Chrome 48.0.2564.116 m - Started at 29MB and reached 30MB
If a video demonstration helps please tell me
Thank you!
All Replies (14)
The step 1 image was not added when i wrote the post. Here it is
I am getting total Firefox usage more like 200MB nothing like 2000MB
I suggest you use about:memory and note that it has the ability to diff. It will show you the changes between two different times.
- see Firefox uses too much memory or CPU resources - How to fix_memory-troubleshooting-tools
Your display name is similar to the site address. Is medacreed.com your site ?
Yes. I am working on a project that has a similar menu show on/off and I noticed that I show/hide the menu while the right container has a image that is set using CSS: background-image, background-size: cover it does increase the memory
It is worth mentioning that I notice this now, but I do remember that on previous versions of Firefox I didn't notice this high RAM memory consumption.
I get that while loading pages and loading images the memory will definitely increase. But the memory increase while I am animating something means something is wrong. Since Chrome, IE11 trigger nothing and since I don't recall Firefox behaving like this
I will record a video. I will post the link to the video in about 20 minutes.
Thank you!
I am uploading to youtube. As soon as it is published I will post the link.
Hi,
Here is a youtube link https://www.youtube.com/watch?v=cOLfWn4SeTs
First on the test is Firefox ( it is my daily browser ;) )
Now, it starts at 300 MB and after the website is loaded it goes to 435MB. After I start the test it jumps all the way to 1000 MB( notice: i reached 2000 but i was on fullscreen, and now i wanted to show Task Manager as well )
Notice how Chrome and IE 11 behave and how easily Firefox throttles.
At minute 2:32 while I was testing it in IE11 you can notice how suddenly the memory jumps back to 675MB so after about 2 minutes of inactivity.
Tell if you need me to do more tests.
Thank you!
Using about:memory and getting a diff will show how the additional memory is used.
Ideally as you are a developer maybe produce a reduced test case that demonstrates the issue with minimal code. Then look through bugzilla and file a bug if this is not already a known issue.
You may find this site is able to help you
- <--- sorry will find link and post back some time later
- update: Link https://webcompat.com/
Modified
Yes. I thought about creating a minimal test case. Will do this and post a link.
I have added the link to the potentialy helpful site webcmpat.com Bug reporting for the internet. However I suspect you will not need their services.
Hi John99,
I have created 2 pages and made a video also. I think i found what is causing firefox to throttle or at least when.
Youtube Link: https://www.youtube.com/watch?v=W5k7gANcpWM
Test Case 1: link text
- Used an image of 1920x1200 as a background-image and also with background-size: cover;
Everytime i use mose out and over multiple times on the left blue strip the Firefox throttles.
Test Case 2:link text
- Used an image of 1600x1000 as a background-image and also with background-size: cover;
Everything works perfect on case number 2. I can hover multiple times on the left blue strip and no memory increase.
So, I would really like an answer from a Firefox Developer if possible. Since it is clear that the problem lies in the way the browser handles big images. And I presume that when handling images above a size value( this case was 1920x1200 ) some faulty code is used.
Chrome and IE11 don't have this problem.
I can't pin-point the section of the code that is causing this memory increase but sure a Firefox Developer would know where to look or have an answer at least.
I also presume that if this bug will be fixed will then lead to thousands of websites working as they should and improve user experience.
Waiting for a reply!
Cheers!
On Test Case 1( 1920x1200 image size ) you can see in the Youtube video that the Memory jumps from around 350MB to around 1350MB when animating.
So if this is not a bug I don't know what is. If simple HTML and CSS animations throttles the Firefox Memory and no Firefox Developer considers to look into this then I guess It might be time to change the browser to Chrome.
Simple CSS animation.
Cheers, Mediacreed
Made some tests regarding image different size and when image size goes off a certian value the Firefox Memory throttles.
Modified
It might be an issue when background-size: cover is used.
When image needs to be re-sized more than the original size the memory throttles.
Just noticed on an image size of 1920x901 that it worked well and when i re-sized the browser to a smaller size and the image had a considerable amount of re-size applied ( background-size: cover ) I noticed again that the memory started throttling.
I am done with tests. For me it is clear that Firefox has a serious issue on this matter.
Hope you fix this as soon as possible!
Modified
Great you are obviously clear about what is happening, and have a far greater technical understanding of the issue than I do.
My suggestion would be that you file a bug yourself at Bugzilla. You will then be able to follow or, work with the Developers directly. Note you will need an email account to register with Bugzilla, and that email address will be publicly visible, so you may wish to use a spare or alias address.
When you file the bug it has a field for keywords, that you will see, please add the keyword memshrink. Probably file the bug under: product = core, component = graphics. The Bugzilla triage team will change any of that if something is more appropriate.
Use bugzilla.mozilla.org & maybe glance at Bug_writing_guidelines You could start to file a bug from https://bugzilla.mozilla.org/enter_bug.cgi#h=dupes|Core|Untriaged FULL link
If you file a bug please post back with the bug number. I would be interested in following that myself.
Note that about:memory reports are gzip files, and although our forum can not handle them directly, bugzilla can. You will be able to attach test cases and about memory reports to the bug you file.
Hi John99,
I will try this and see if it rings any bells.
Cheers, Mediacreed