Painting Issue: async(dom modification in row template)

[robrez]

Here is a JSFiddle that demonstrates my issue: http://jsfiddle.net/1q34kxe0/1/

I'm trying, unfortunately, to use a core-list whose entire set of data is html markup generated server-side. Its repeat template is a component that simply uses injectBoundHTML / innerHTML to change its content to the html. - this works fine --- or I thought it did until I hopped on some different devices and different browers. I started experiencing some real slowness.

I tried to wrap the dom modification in:

• this.async(this.doDomStuff); and
  • this.job('j', this.doDomStuff, 25);

That second approach really helped smooth things out. Both of these approaches, however, cause a lot of "bleeding" among the rendered rows. The bleeding sort-of fixes itself whenever the window is resized OR whenever an individual row is clicked/tapped; but, things go back to "weird" after a bit of scrolling about.

Worth mentioning -- I tried an approach where I save off the element generated by the innerHTML and re-parenting that element to its new host whenever that items was scrolled back into being. I was hoping that this would be less of a jolt than having to re-inflate the innerHTML every time. That approach does seem to help some.

Any suggestions or criticisms are welcome.

Rob

[robrez]

after learning more about polymer and core-list, I think this issue is not worth looking into.

Issue can be closed.

there does seem to be an issue in safari where offsetHeight / clientHeight do not seem to report an accurate number until an element has been attached to the dom for some random amount of time if that element is made up of numerous nested web components. I think this issue is responsible for some sizing problems I was having w/ the core-list.