Note this bug is reproducible within Safari Desktop and Latest Webkit Builds, as well as Safari iOS 16.x

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 audio 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 an audio element if has a src attribute defined and one or more event listeners registered on that audio 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 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 audio elements which remain in memory.