From 8af4197dab9fcc2c48ebe4771e1518f50306e163 Mon Sep 17 00:00:00 2001 From: crisbeto Date: Wed, 22 Jul 2020 20:18:54 +0200 Subject: [PATCH] fix(clipboard): scroll position changing while copying on some browsers 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 | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/src/cdk/clipboard/pending-copy.ts b/src/cdk/clipboard/pending-copy.ts index 0250999b0c7b..9db67feb66d7 100644 --- a/src/cdk/clipboard/pending-copy.ts +++ b/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);