Chrome (Windows) has weird scroll-jump behaviour?

[josephrocca]

Incorrect Behaviour

When a page has lots of elements with the data-clipboard-text set, clicking one of these elements causes the page scroll to jump downwards. At the top of the webpage, if you click an element, there is no jump at all. The further down the page you are, the larger the scroll-jump is when you click an element.

Minimal example

https://jsfiddle.net/65gjsbok/
To see the effect in action, use Chrome on Windows, and scroll about half-way down the page of emojis, then click an emoji. On my computer, the page scoll instantly jumps downwards to near the bottom of the page.

Expected behaviour

I'd expect that the page scroll should not "jump" when clicking an element with data-clipboard-text.

Browsers affected

I tested on Chrome (Android), Chrome (Windows) and Mozilla (Windows). It appears that it only affects Chrome (Windows).

Other notes

This here is a modified fiddle which packs all the emojis up as high as possible, but has a "filler" div which enables the page to be very long still. It shows that this problem is dependant on the current scroll position. If you scroll down a bit, then click an icon, you'll see a very small jump.

Hopefully this is just something silly that I'm doing! But it's weird that it's only happening on Chrome on Windows.

Thanks!

[kafeltz]

I'm testing on Chrome (Mac) and all seems to work fine.

Just in case you would want to know.

[josephrocca]

Thanks for that 👍 hopefully someone else can give Windows a shot to see if it's just something very weird going on with my computer.

[josephrocca]

(bump) Anyone with Chrome on windows getting this behaviour in the above fiddles?

[thugsb]

I am getting the jump behaviour on Safari on this page when clicking Copy Link: https://www.sarahlawrence.edu/news-events/events/?filter-month=2016-06

The top few seem to be OK, but once you scroll down a little and click, it jumps you to the bottom of the page.

[josephrocca]

Hmm... Do you get the jumping behaviour in the minimal example fiddle I posted? I'm not getting the jumping behavior in the link you posted with Chrome/Windows

[thugsb]

I see it in the fiddle in Safari, but not with Chrome. I'm on a fully-updated Mac.

[josephrocca]

Cheers. Does this library support safari? I didn't think it did. Strange new development for me (again, Chrome/Windows): It's happening somewhat randomly. Like every 10th click or something (not when clicking the same element though). Right now, if I go to the fiddle, then scroll down to about half way, I need to click on ten or so emojis until the jumping occurs. Could you test Chrome with 10 or so clicks @thugsb? Maybe my Chrome updated recently, but I'm pretty sure that's not the case. Really unusual. Hopefully someone with some knowledge of the inner workings of this lib can comment on this.

[thugsb]

I can't get it to jump on my Chrome/Mac, event after 30 clicks, and in various amounts scrolled down the page.

This library doesn't support the full copy-to-clipboard in Safari, but it does select the correct text so people can ctrl-c it. I've decided to remove the code for Safari, so that the buttons don't event appear.

[zenorocha]

Sorry @josephrocca, I wasn't able to reproduce this problem. It seems like this bug should be reported to Chrome since it's related to a single operation system. Thanks for reporting!

[manovotny]

As noted above, I experience this same jumping behavior on Safari, but I somewhat expect that given the lack of Safari support.

[josephrocca]

@manovotny I would still expect it to behave nicely in Safari. Curerently I'm using the error callback (thrown when using safari) to initiate a manual copy/paste from a text input.

@zenorocha Looks like the problem occurs across multiple browsers. Could it be a bug introduced in a recent release? Seems very unlikely that this would have gone unnoticed by everyone until now.

[zenorocha]

@josephrocca looks like what you're saying is a separate issue from the one that was created here. Please share a JSFiddle with a minimal example that reproduce such error.

[josephrocca]

I think there's some misunderstanding here. The issue is that there is weird jumping behaviour on this minimal example: https://jsfiddle.net/65gjsbok/ (same one posted originally)

I happens on Chrome/Windows for me (when I scroll down half way and then start clicking items randomly), and others have found somewhat similar behaviour on Safari.

[zenorocha]

Got it. Problem identified and fixed at v1.5.11.

[josephrocca]

Thanks for your work on this great lib! 👍

[zenorocha]

🎉 🎉 🎉 🎉 🎉 🎉

[halbstar]

Sorry to disappoint you,
but I had 2 nightmarish days, until I've found this issue
(last thing that I've expected was problem with module :)
Problem was in Safari, and Firefox, but, funny, not in Chrome...

We have a (jquery) context menu (right click), where some id or password is hidden and user should copy it.
When you click on context menu, page jumps to the top...

I tried to upgrade, but it didn't help... So I removed the line:

// Move element to the same position vertically
this.fakeElem.style.top = (window.pageYOffset || document.documentElement.scrollTop) + 'px';

and jumping stopped

I'm in a bit of a hurry now, so I don't have time to think about consequences,
but do we really need that line?

[zenorocha]

Yes, that line is necessary @halbstar. Please make sure you're using the latest clipboard.js version and share a minimal JSFiddle that reproduces this error.

[halbstar]

Ok, back again with the new solution.

First to say something about a problem:
It seams that problem appears when the element is inside some complex environment -
like in my case, there is an iframe (table like), and inside that iframe a new element is appearing (context menu),
and it seams that this conditions makes both window.pageYOffset and document.documentElement.scrollTop returns 0,
but the copy click was, lets say, 1000px down in table.

Thats why its good to have third position check, like in my case, position where event fired

so now I changed line 467:
this.fakeElem.style.top=(window.pageYOffset||document.documentElement.scrollTop)+"px"

into this:
this.fakeElem.style.top = (window.pageYOffset || document.documentElement.scrollTop || event.pageY) + 'px';

and this finally works in all tested situations, in my environment, but I'm really not sure is this good universal solution.

But definitely, problem is there, and this is just a suggestion to think about it...

Sorry again for not delivering fiddle example, but as I said, environment that I'm working on is very complex, there is a lot of libraries involved,
so it would take me some time to produce it. I'll try it, in a next couple of days if I catch some time... :)

Thanks...

EDIT:
Not working in Firefox :(

[zenorocha]

Ok @halbstar, thanks for sharing your findings. Unfortunately I can't accept this fix since there's no way to reproduce it yet but we'll be waiting for a JSFiddle :)

[filippivanov]

Hi, sorry to barge in on a closed issue, but we encountered similar behaviour in the horizontal direction. Here's an example (tested in Chrome 54 & FF 50):

https://jsfiddle.net/hoh4w5g6/1/

Scroll to the right and click a button. Text is copied, but the scroll jumps to the left.

Setting fake textarea position to pageXOffset fixes the scroll problem, but then, of course, the area is visible. Changing its display to none or visibility to hidden breaks the copy, so the only hack that worked was calling removeFake() immediately after copyText(), which doesn't look like a satisfactory solution.

[nskazki]

Have same issue: Iframe environment + scroll to top on click of copy-button.
In my case it happens because of var yPosition = window.pageYOffset || document.documentElement.scrollTop; was equal to 0 on each call.
So, I replace that line by var yPosition = window.pageYOffset || document.documentElement.scrollTop || this.trigger.getBoundingClientRect().top; and this resolve my issue :)
Note: app still working out of Iframe.

[nskazki]

Also, got scrolling to the left side of window on copy. Like in this issue: #347
Fixed by changing couple of lines:

  this.fakeElem.style.opacity = '0'
  const yPosition = window.pageYOffset || document.documentElement.scrollTop || this.trigger.getBoundingClientRect().top
  const xPosition = window.innerWidth - this.trigger.getBoundingClientRect().left
  this.fakeElem.addEventListener('focus', window.scrollTo(xPosition, yPosition))
  this.fakeElem.style.top = yPosition + 'px'
  this.fakeElem.style.left = xPosition + 'px'

Gist with hotfix: https://gist.github.com/nskazki/03f8ddbdf53ec8cada3d4d873dd9fd79
If it's totally wrong way to fix my problems, please tell me about it :)

[yoselibero]

Ok i did it, got valid reproducing example!

Windows 10, Chrome..
https://jsfiddle.net/whfozrej

1. click "Copy me 1", you got "xxx" in your clipboard
2. then actually go to paste it to some text editor (so you will lose Chrome focus)
3. then go with mouse over the Chrome window, but do not click it, do not obtain focus, scroll the mouse wheel above it, scrool to "Copy me 2" button, so you can see it
4. click the "Copy me 2" button and the page will jump to the top without value "yyy" being copied

Hope this helps!
This example is very natural, client copies text, goes somewhere to paste it, goes back and page jumps. What is actually a killer in my case, when the page jumps, there is some link under the mouse in that moment which gets clicked, so it's very confusing, as the client i.e. ends up on different page.

Thanks for your work.
Josef

[zenorocha]

This should be fixed on v1.6.0. Let me know if you guys are still having this problem or not.

[mrlaseptima]

I still have it on version 2.0.11
Windows and Google chrome.