Checkbox moves when clicked if in particular CSS structure

[andrewseguin]

When the checkbox is nested in a container with hidden overflow, and that container's parent is a flex container with align-items center, the checkbox will move up when clicked:

https://stackblitz.com/edit/angular-zc9dkd?file=app/checkbox-overview-example.html

Click the checkbox and notice that it is now halfway hidden

This was discovered when using checkboxes in cells in the table https://github.com/angular/material2/issues/8517

[tinayuangao]

I think this is because our ripple.

A workaround is adding

  display: inline-flex;
  margin: 15px; // ripple 

to .mat-checkbox.

[5earle]

Good day. i am a student studying open source at Seneca college, and would like to take a go at this project if it is still available