In our web application we’ve noticed a significant number of detached DOM subtrees not getting garbage collected when running in Safari Desktop and on iOS. We’ve managed to narrow the issue down to subtrees containing video elements that have event listeners registered directly on them at the time the subtree is removed from the DOM.


The retained (leaking) subtrees in question correspond to panel UI within our application, so you can imagine how the process size of the web application tab grows steadily as the user triggers the showing and hiding of various panels. Our panels are quite large and complex so things sometimes get the point where Safari iOS will reload our web application.


Attached to this bug is an HTML file containing a minimal test case that illustrates the issue. What we’ve observed is that Safari will hold a reference to a video element in the following cases:

* The video tag uses a controls attribute: <video controls>
* The video has a src attribute specified and there is at least one event handler on the video element


There is also a video attached to this bug that demonstrates what we see.


I can reproduce this issue in Safari 16.5 as well as WebKit 268505@main.


Instructions:


* Load the test case in a Safari or Webkit build.
* Click the “Remove All” button at the top of the page.
* Trigger a garbage collection via the terminal with ‘notifyutil -p org.WebKit.lowMemory’
* Observe that all of the test cases turn green except for the samples that use a controls attribute, or have event listeners on them
* Click on the “Unparent All” button
* Trigger a garbage collection
* Observe that for the test cases that are not green, all elements in the sample subtrees turn red, indicating they have been garbage-collected, except for the video elements which remain in memory.