fix(select): transparent background when overscrolling

[crisbeto]

Fixes the select being transparent on browsers that allow overscrolling (mostly mobile).

Here's what it looks like before the fix:

[kara]

@crisbeto This will change the animation and take it off spec. Any other way to fix this?

[crisbeto]

The background has to be on the scrollable container. I can try adding it after all animations are done, otherwise the alternative is to make the md-select-content scrollable, but it might break more stuff.

[kara]

Yeah, try adding it after the panel animation finishes.

[crisbeto]

I spent some time trying to get it to work, but the only way ended up being kind of ugly. @kara do you know whether this can be simplified (ignore the colors and timings, I've exaggerated them for easier testing):

export const transformPanel: AnimationEntryMetadata = trigger('transformPanel', [
  state('showing', style({
    opacity: 1,
    minWidth: 'calc(100% + 32px)',
    transform: `translate3d(0,0,0) scaleY(1)`,
    backgroundColor: '#f00'
  })),
  transition('void => *', [
    style({
      opacity: 0,
      minWidth: '100%',
      transform: `translate3d(0, 0, 0) scaleY(0)`
    }),
    animate(`1500ms cubic-bezier(0.25, 0.8, 0.25, 1)`, style({
      opacity: 1,
      minWidth: 'calc(100% + 32px)',
      transform: `translate3d(0,0,0) scaleY(1)`
    })),
    animate('0ms 1500ms linear', style({
      backgroundColor: '#f00'
    }))
  ]),
  transition('* => void', [
    animate('2500ms 1000ms linear', style({opacity: 0}))
  ])
]);

The change is that the styles from the showing state have to be repeated below as well.

[kara]

@crisbeto Given that the color should come in immediately after the animation (rather than animating in), it might be easier to do this outside of the animation definition. Have you tried adding something to the existing "done" hook for the animation? There is an _onPanelDone method that is called when the animation finishes. Try toggling a style or class binding at that point instead.

[crisbeto]

The main reason was that I wanted to keep it together with the animation logic since it's animation-related. I've changed it, can you take another look @kara?

[kara]

Like this approach better. Can you add a test for the correct application of the class?

[kara]

Have you tried using a regular class binding? It might be less verbose.

[class.ng-select-panel-done-animating]="_panelDoneAnimating"

[kara]

It seems like this will only work the first time you open the select. Don't you need to reset this to false when the panel closes?

[crisbeto]

Updated again @kara. Good spot with resetting of the value, it would've gotten broken if it went through.

[kara]

LGTM

[kara]

@crisbeto Is this ready to go?

[crisbeto]

It is @kara

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}