Scrolling inside ace-element hangs Chrome

[enyo]

I've tried the ace-element implementation and chrome completely freezes when scrolling inside the editor. I haven't been able to figure out why yet.

I played around a bit, and found out that ace always hangs on scroll, when polymer is included in the page.

[dfreedm]

This seems to only happen when ShadowDOMPolyfill is in use.

[dfreedm]

There's some sort of infinite loop happening where nodes are being added and removed.

I managed to capture a profile from dev tools, so I'll start from there.

@arv, @ajklein I may reach out to you two for help in processing the profile :)

[dfreedm]

Found it: ace/layer/text $renderLinesFragement depends on childNodes being a live nodelist.

https://github.com/ajaxorg/ace/blob/master/lib/ace/layer/text.js#L367

Because container.childNodes is not live, the while(lines.length) will inf-loop.

@arv Any thoughts?

[arv]

We could make length a getter that triggers invalidation every time.

If that gets too slow I would have a dirty bit on the parent node and set that any time a child is added or removed.

[KarstenB]

If I replace the while loop with: fragment.appendChild(container); it appears to be working, and the only down side that I can see is that it actually inserts the <div> instead of just the children, which does not appear to cause anything bad to happen. Or am I missing a better workaround?