Why translate3d DOM node leak?

Question

Consider this HTML page:

http://jsbin.com/aYUcelo/1/ (I recommend downloading it to get rid of all jsbin noise).

By pressing the GO button, a div is added to the body. RM removes one of the divs. He also applies one of two styles to the new div:

newDiv.style.color = "red"; // or newDiv.style.WebkitTransform = "translate3d(0px, 0px, 0px)"; 

You can see the ever-increasing number of nodes in the chronological chrome memory scale dev, GC cannot delete if WebkitTransform is used. This does not happen with red.

edit: just to make it clear that applying the “red style” to the add and remove divs operation is the node equivalent of a count.

What is the reason for this behavior? Am I missing a point? Is there a DOM node leak?

Here you can find two timeline entries: https://docs.google.com/file/d/0B9S6doraVaWXdjRyWjluMW1BUlU (translate) https://docs.google.com/file/d/0B9S6doraVaWXQVAwbFpfZzh1RVE (red)

In both entries, three divs are added and removed, and the GC is requested at the end. For your information only: I have a more complex angular application, but I can track down a memory leak in the same problem. Anyway, I created this simpler example.

Edit: two images of timeline entries: https://docs.google.com/file/d/0B9S6doraVaWXMURzMjdhMWI0UDA https://docs.google.com/file/d/0B9S6doraVaWXWGhwVWhlMjN4dkE

Edit 2: launch Windows 8 / Chrome 30.0.1599.69 m

Answer 1

Are you using Visual Studio 2013 by accident? if so, check your network panel and see if there is a correlation between any XHR activity and the manipulation of messy objects in memory. If so, this is because Visual Studio 2013 is integrated with the signalR browser monitor, which runs while testing your project in the browser in which you deploy it.