I have a lot of mp4 video elements on the page that are playing at the same time. On average, their weight is 70-110kb. If i display a lot of mp4 in a video tag, then there is a big memory leak in Safari macOS, Safari iOS. There is no leakage in chrome, and it also cleans the video quickly. I'm trying to clear the video, but it looks like safari is doing too badly for this task. The page may freeze for 5-10 seconds, or completely freeze. Here's an example, you can try it in Chrome & Safari. - http://jsfiddle.net/GhS2Z/3/ Chrome instantly removes and adds an element, while safari has a long delay >2s. And this is just 1 video, but I have more than 20 on my page.
<rdar://problem/69396335>
Created attachment 419919 [details] Sample React App & Safari Space Dump We are seeing similar issue in our product and due to this issue we have to significantly limit new functionality for Safari browser users as compared to Chrome. I am attaching sample react app & memory dump from Safari. You can see that "Page memory consumption" keeps on increasing when new video elements are added & removed.
(In reply to Balwant Bisht from comment #2) > Created attachment 419919 [details] > Sample React App & Safari Space Dump > > We are seeing similar issue in our product and due to this issue we have to > significantly limit new functionality for Safari browser users as compared > to Chrome. > > I am attaching sample react app & memory dump from Safari. You can see that > "Page memory consumption" keeps on increasing when new video elements are > added & removed. Does this reproduce in a standard web page, or does it only happen in a React app?
You might want to change the summary of this bug — the sample in Comment 2 just uses `getUserMedia` streams, so this seems to be nothing to do with MP4 video, and everything to do with <video> elements.
Created attachment 420207 [details] Test page with simple javascript to add & remove video elements I don't see memory leak in Safari if I set srcObject to null and use simple javascript to add & remove video element. I see thread decoding the video are getting stopped when video elements were removed. But if I don't set srcObject to null before removing video element then threads keep on increasing & crashes the Safari. Setting srcObject to null in React App is still leaking memory. We are investigating it further.
Is there any update to this problem? Setting srcObject to null works around it, but it is not easy to do because frameworks such as React do not allow us to access the video node before removing it from the DOM.
I notice your fiddle sets video.src = '', but it doesn't then call video.load(). The HTML spec requires authors to call load() after setting the video's src to an empty string. If you do so, does that address your problem?