Checkbox display breaks if parent has a 'columns' property

[Lakston]

Bug, feature request, or proposal:

Bug

What is the expected behavior?

Single checkboxes

What is the current behavior?

OSX : checkboxes are doubled (the native checkbox is visible under the material one)

windows : a pixel is visible under the material checkbox

edot : forgot to add that the ripple breaks too.

What are the steps to reproduce?

here is a stackblitz reproduction

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

    "@angular/animations": "^5.1.0",
    "@angular/cdk": "^5.0.0",
    "@angular/common": "^5.1.0",
    "@angular/compiler": "^5.1.0",
    "@angular/core": "^5.1.0",
    "@angular/forms": "^5.1.0",
    "@angular/http": "^5.1.0",
    "@angular/material": "^5.0.0",

chrome OSX : Version 63.0.3239.108 (Official Build) (64-bit)
chrome windows : Version 63.0.3239.84 (Official Build) (64 bits)

Is there anything else we should know?

Could not reproduce on Safari

[Lakston]

I'll add the same gif I added to the PR, the ripple is still broken when adding opacity: 0, here is the gif showing the ripple bug :