fix(autosize): properly detect line-height in firefox

src/lib/input/autosize.spec.ts

@@ -130,6 +130,21 @@ describe('MdTextareaAutosize', () => {
       .toBeGreaterThan(previousMinHeight, 'Expected the textarea to grow to two rows.');
   });
 
+  it('should calculate the proper height based on the specified amount of max rows', () => {
+    fixture.componentInstance.content = [1, 2, 3, 4, 5, 6, 7, 8].join('\n');
+    fixture.detectChanges();
+    autosize.resizeToFitContent();
+
+    expect(textarea.clientHeight)
+      .toBe(textarea.scrollHeight, 'Expected textarea to not have a vertical scrollbar.');
+
+    fixture.componentInstance.maxRows = 5;
+    fixture.detectChanges();
+
+    expect(textarea.clientHeight)
+      .toBeLessThan(textarea.scrollHeight, 'Expected textarea to have a vertical scrollbar.');
+  });
+
   it('should properly resize to content on init', () => {
     // Manually create the test component in this test, because in this test the first change
     // detection should be triggered after a multiline content is set.

src/lib/input/autosize.ts

@@ -126,6 +126,13 @@ export class MdTextareaAutosize implements AfterViewInit {
     textareaClone.style.minHeight = '';
     textareaClone.style.maxHeight = '';
 
+    // In Firefox it happens that textarea elements are always bigger than the specified amount
+    // of rows. This is because Firefox tries to add extra space for the horizontal scrollbar.
+    // As a workaround that removes the extra space for the scrollbar, we can just set overflow
+    // to hidden. This ensures that there is no invalid calculation of the line height.
+    // See Firefox bug report: https://bugzilla.mozilla.org/show_bug.cgi?id=33654
+    textareaClone.style.overflow = 'hidden';
+
     textarea.parentNode!.appendChild(textareaClone);
     this._cachedLineHeight = textareaClone.clientHeight;
     textarea.parentNode!.removeChild(textareaClone);