fix(clipboard): scroll position changing while copying on some browse…

…rs (#20073)

The clipboard module works by creating a `textarea` dynamically, focusing it and copying its content. In order to prevent it from affecting the page layout, we put it at `-999em` off-screen, but the problem is that some browsers will try to move it into the view on focus by scrolling up.

These changes use `position: fixed` and anchor the textarea to the top of the page so vertically it's within the viewport.

src/cdk/clipboard/pending-copy.ts

@@ -26,11 +26,12 @@ export class PendingCopy {
     const textarea = this._textarea = this._document.createElement('textarea');
     const styles = textarea.style;
 
-    // Hide the element for display and accessibility. Set an
-    // absolute position so the page layout isn't affected.
-    styles.opacity = '0';
-    styles.position = 'absolute';
-    styles.left = styles.top = '-999em';
+    // Hide the element for display and accessibility. Set a fixed position so the page layout
+    // isn't affected. We use `fixed` with `top: 0`, because focus is moved into the textarea
+    // for a split second and if it's off-screen, some browsers will attempt to scroll it into view.
+    styles.position = 'fixed';
+    styles.top = styles.opacity = '0';
+    styles.left = '-999em';
     textarea.setAttribute('aria-hidden', 'true');
     textarea.value = text;
     this._document.body.appendChild(textarea);