fix(clipboard): scroll position changing while copying on some browsers #20073
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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.
crisbeto
added
P3
googlebot
added
the
cla: yes
|
Hi @crisbeto, srry I am late to this :( did you checked if the fix is working in IE11? There is same issue in See issue here: angular/angular#37796 |
|
I was testing against IE11 specifically when I saw the issue. This won't fix angular.io since they aren't using the CDK though. |
|
@crisbeto Ok 💯 It would be great if you can give any suggestions to solution in the other issue, because I tried to apply the code here to |
jelbourn
pushed a commit
that referenced
this pull request
Jul 28, 2020
…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. (cherry picked from commit a6f1a33)
gkalpak
added a commit
to gkalpak/angular
that referenced
this pull request
Jul 29, 2020
…a creation
This commit simplifies the creation of the temporary, hidden
`<textarea>` element used by `CopierService` by switching from absolute
to fixed positioning and not requiring page's scroll offset.
It also makes the following minor improvements:
- Make the element invisible (via `opacity: 0`).
- Instruct screen-readers to ignore the element (via
`aria-hidden: true`).
NOTE: These improvements are based on Angular CDK's [PendingCopy][1]
class and the changes proposed in PR angular/components#20073.
[1]: https://github.com/angular/components/blob/89b5fa89d1437c3054c5/src/cdk/clipboard/pending-copy.ts
mhevery
pushed a commit
to angular/angular
that referenced
this pull request
Jul 29, 2020
…a creation (#38244) This commit simplifies the creation of the temporary, hidden `<textarea>` element used by `CopierService` by switching from absolute to fixed positioning and not requiring page's scroll offset. It also makes the following minor improvements: - Make the element invisible (via `opacity: 0`). - Instruct screen-readers to ignore the element (via `aria-hidden: true`). NOTE: These improvements are based on Angular CDK's [PendingCopy][1] class and the changes proposed in PR angular/components#20073. [1]: https://github.com/angular/components/blob/89b5fa89d1437c3054c5/src/cdk/clipboard/pending-copy.ts PR Close #38244
mhevery
pushed a commit
to angular/angular
that referenced
this pull request
Jul 29, 2020
…a creation (#38244) This commit simplifies the creation of the temporary, hidden `<textarea>` element used by `CopierService` by switching from absolute to fixed positioning and not requiring page's scroll offset. It also makes the following minor improvements: - Make the element invisible (via `opacity: 0`). - Instruct screen-readers to ignore the element (via `aria-hidden: true`). NOTE: These improvements are based on Angular CDK's [PendingCopy][1] class and the changes proposed in PR angular/components#20073. [1]: https://github.com/angular/components/blob/89b5fa89d1437c3054c5/src/cdk/clipboard/pending-copy.ts PR Close #38244
Splaktar
pushed a commit
to angular-hispano/angular
that referenced
this pull request
Aug 8, 2020
…a creation (angular#38244) This commit simplifies the creation of the temporary, hidden `<textarea>` element used by `CopierService` by switching from absolute to fixed positioning and not requiring page's scroll offset. It also makes the following minor improvements: - Make the element invisible (via `opacity: 0`). - Instruct screen-readers to ignore the element (via `aria-hidden: true`). NOTE: These improvements are based on Angular CDK's [PendingCopy][1] class and the changes proposed in PR angular/components#20073. [1]: https://github.com/angular/components/blob/89b5fa89d1437c3054c5/src/cdk/clipboard/pending-copy.ts PR Close angular#38244
|
This issue has been automatically locked due to inactivity. Read more about our automatic conversation locking policy. This action has been performed automatically by a bot. |
Sign up for free
to subscribe to this conversation on GitHub.
Already have an account?
Sign in.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
The clipboard module works by creating a
textareadynamically, focusing it and copying its content. In order to prevent it from affecting the page layout, we put it at-999emoff-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: fixedand anchor the textarea to the top of the page so vertically it's within the viewport.