md-datepicker min-max demo doesn't work on Safari

[colinskow]

I open the DatePicker demo on Safari 8.08 / OS X.

Date-picker with min date and max date

If I scroll up to July it is fine. Scrolling down, Oct & Nov 2015 repeat infinitely. It seems to work fine on Chrome.

[jelbourn]

@mhchen Would you have time to take a look at this?

[RolandHeath]

If md-datepicker is using md-virtual-repeat under the covers, this could be related to #4169 - the behaviour of repeating the last few elements is very similiar. If you've got a virtual repeat around an item with padding, this can occur.

A potential fix (I'm not able to do a PR right now):
'<md-virtual-repeat-container class="md-calendar-scroll-container" ' +
'md-offset-size="' + (TBODY_SINGLE_ROW_HEIGHT - TBODY_HEIGHT) + '">' +
'<table role="grid" tabindex="0" class="md-calendar" aria-readonly="true">' +
'<tbody role="rowgroup" md-virtual-repeat="i in ctrl.items" md-calendar-month ' +
'md-month-offset="$index" class="md-calendar-month" ' +
'md-start-index="ctrl.getSelectedMonthIndex()" ' +
'md-item-size="' + TBODY_HEIGHT + '"></tbody>' +
'</table>' +
'</md-virtual-repeat-container>'
Should be:
'<table role="grid" tabindex="0" class="md-calendar" aria-readonly="true">' +
'<md-virtual-repeat-container class="md-calendar-scroll-container" ' +
'md-offset-size="' + (TBODY_SINGLE_ROW_HEIGHT - TBODY_HEIGHT) + '">' +
'<tbody role="rowgroup" md-virtual-repeat="i in ctrl.items" md-calendar-month ' +
'md-month-offset="$index" class="md-calendar-month" ' +
'md-start-index="ctrl.getSelectedMonthIndex()" ' +
'md-item-size="' + TBODY_HEIGHT + '"></tbody>' +
'</md-virtual-repeat-container>' +
'</table>'

The padding on class md-calendar is causing it, but more generally, you should only wrap the elements that you're repeating.

[colinskow]

Also fails on Safari 9.0.

[mhchen]

Quick update: some investigation reveals that this particular issue is caused by a duplicate month being rendered by virtual-repeat:

<img width="345" alt="Duplicate datepicker month"src="https://cloud.githubusercontent.com/assets/1325549/10271271/29e31f54-6abf-11e5-93c2-b49a24b5e7ec.png">

This happens on calendars that don't have max-date set too but it's far more apparent on calendars with max-date set since you'll see that issue where it just scrolls forever and repeats the last 2 months.

Also happens on FF, have yet to see this issue happen on Chrome. Currently exploring for the best fix.

[colinskow]

What I suspect is happening, is that Chrome won't let a user scroll past the bottom of the virtual repeat scroller object so it reaches the bottom and stops as it is supposed to. But on Safari nothing stops it from going past the bottom so it infinitely repeats the last two items. If you scroll back up it scrolls like normal after you get back to above the bottom.

I don't know if the bug lies in Safari, or lies in the Virtual Repeat. We could try running a check to ensure the scrollTop never goes past the bottom.

Has anyone seen this bug on a horizontal scroll?

[mhchen]

@colinskow just wondering: are you able to see a situation in Chrome where the duplicate month renders and the scrolls object stops scrolling? As noted in my comment above I strongly suspect this is due to a duplicate month being rendered in non-Chrome browsers and not due to some arbitrary stoppage of the scroll. When there is a duplicate month the scroller height is taller than what virtual-repeat expects and it bugs out. This bug has been pretty tricky to diagnose so if you have a definite example to the contrary I'd really like to know about it!

[colinskow]

In Chrome a duplicate month never renders. It works correctly. I had a similar bug with my virtual-repeat implementation, and it turned out that word-wrap had made some of my items taller than the specified size. On Chrome it caused the scroller to stop several items before my list ended. On Safari it totally bugged out and repeated the last one or two items forever. (Same behavior we are seeing in Datepicker.)

What is interesting on Safari is that after Dec 2015 repeats 10 times, I scroll back up through it 10 times to get back to November and October. Try tracing this.scroller.scrollTop from VirtualRepeatContainerController to see if it keeps incrementing as you go down.

In my case, I solved it by adding overflow: hidden; to my CSS to make sure no extra height is added.

You want to make sure the height of each calendar page is exactly the height specified in your CSS.

[mhchen]

Interesting that Chrome fixed the problem in your other example. This probably has some bearing on other issues with virtual-repeat but barring any other evidence it seems pretty clear to me that this particular issue is not CSS-related since the calendar months are all fixed heights and this duplicate month issue is readily identifiable and quite a good explanation for the problem we're seeing.

[colinskow]

Go here: https://material.angularjs.org/0.11.2/#/demo/material.components.virtualRepeat
(using Safari)

Load the "Deferred Loading" example in CodePen. Scroll down past 49999. Same behavior. The issue is definitely Virtual Repeat.

[mhchen]

Sure, I'm not really convinced that we disagree. I filed a PR for this that will fix it but waiting to hear from the author of virtual-repeat about the approach.