Infinite loop when a horizontal scrollbar appears and disappears

[unpollito]

Hello,

I have noticed an infinite loop scenario in angular-vs-repeat which causes the application to hang indefinitely. I'm using Angular 1.6.6 and angular-vs-repeat 1.1.17. The situation is as follows:

1. I have a list of elements and a container with overflow: auto such that only N fit completely and the N+1-th element fits only partially.
2. The first N elements fit in the container, but the N+1-th element is too wide and causes a horizontal scrollbar to appear.
3. Since a horizontal scrollbar appears, the container's clientHeight changes, and now only the first N elements are painted.
4. Since the first N elements fit inside the container, the horizontal scrollbar is no longer needed and it disappears, thus triggering reinitialization again.
5. The N+1-th element appears again, causing the horizontal scrollbar to appear again, and we're back at step 2.

I have created a Plunkr where this issue can be seen in action: https://plnkr.co/edit/yn9ddqejzH23J6TL0vfP.

I believe that the following approaches could solve this issue:

• Adding a limit to the number of recursive calls that can be done to reinitialize() from reinitOnClientHeightChange().
• Using offsetHeight instead of clientHeight to calculate how many items can be drawn, and account for borders and padding separately.
• Keep track of whether the container had a horizontal scrollbar in the previous call to reinitOnClientChange and, if the only reason why the clientHeight changes is that a scrollbar just appeared, refrain from invoking the reinitialize() method.