Overscrolling when an element is hidden in the app

[kristianfreeman]

Working on an app with ember-cloaking – while the defaultHeight is set to 55px, we're seeing some weird behavior when we really aggressively scroll (like 2/3 down the page). We have a table list of items (just divs, basically), and some of them are hidden until they're enabled via a button in the UI. When we scroll really far down the page, the items load, but then the page starts to scroll up on its own a variable amount.

My guess here is that having rows that are "hidden" (a height of 0px) but still in the DOM is messing with the height calculations in some way. Any ideas?

[kristianfreeman]

I did a bit more research on here and I'm still not really sure what the right solution is. I think part of the problem is that ember-cloaking wraps the actual itemView used for the cloaked elements in its own view; if that view exists at all, we have problems. Is there a point where I can plug in from inside the app to stop the wrapper views from rendering at all?

I should've mentioned in the original comment that when all the rows are shown (no zero-height elements), the scrolling works flawlessly. So this is definitely related to having zero-height elements.

[eviltrout]

The wrappers are necessary for the way it works, as elements are replaced with the height of the content they cloaked. Why are rows hidden at 0px and not their original height?

[kristianfreeman]

So the template would look like:

{{#if canDisplay}}
  {{ (dom stuff here) }}
{{/if}}

This is what causes the 0px row. What would you suggest as a better way of implementing this? I have a custom view that handles each row – should I be setting isVisible on there instead?

[eviltrout]

Hmm that's an interesting use case. I am not sure what the correct answer would be. If elements can be swapped in/out that will definitely affect scrolling.

[kristianfreeman]

We resolved this by moving all the logic out of the template!