title: Material autocomplete panel issue
body: <p>In my angular 4 project I have an issue with Material autocomplete.
  When I type something and the component shows suggestions if I scroll the page I see the suggestions panel unlinked from the autocomplete field like you see in the picture.
  But in the <a href="https://material.angular.io/components/autocomplete/overview" rel="nofollow noreferrer">Material-Autocomplete</a> I don't have this issue.</p>
  
  <p>This is my code:</p>
  
  <pre><code>&lt;mat-form-field&gt;
          &lt;input matInput placeholder="{{'customer.detail.labels.country'
            | translate }}" required [matAutocomplete]="tdAuto" name="country" #country="ngModel" [(ngModel)]="selected.country"
            (ngModelChange)="searchCountry($event)"&gt; &lt;/mat-form-field&gt;
              &lt;mat-autocomplete #tdAuto="matAutocomplete" [displayWith]="displayFn"&gt;
              &lt;mat-option (onSelectionChange)="setCountry(country)" *ngFor="let country of countries" [value]="country"&gt;
                  &lt;div class="row"&gt;
                    &lt;img src="assets/img/flags24/{{country.alpha2Code | lowercase}}.png" /&gt;
                      &lt;span&gt;{{country.name}} ({{country.alpha2Code}})&lt;/span&gt;
                  &lt;/div&gt;
              &lt;/mat-option&gt;
          &lt;/mat-autocomplete&gt;
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/9PhsR.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/9PhsR.png" alt="enter image description here"></a></p>