Not working on IOS 15.1 Safari / Chrome

[christopheSeeka]

I installed the lib and it work well on windows / android but it doesn't seem to copy anything on IOS 15.1 ipad.

Is it a known issue or is it supposed to work on latest IOS versions with Chrome and Safari?

[maxhoffmann]

same here

[Noitidart]

It might be the optional catch, can you try this please - #49

[thiessenp-cds]

same here
I tried adding the update for the catch but text still is not being copied to the clipboard (on iOS Safari Version 16.2). No exception / error is being thrown, it's weird

[Noitidart]

Are you sure your applying of my PR there is taking affect? Can you try to console log. And then can you have it console log the error when it happens.

[thiessenp-cds]

That's just it, there is no exception/error thrown, the execCommand() just fails to copy to clipboard (iOS Safari only). I tried a simpler example without this library using the same API commands and that works across browsers but not consistently in Safari. I suspect the bug is related to Safari's implementation of execCommand() but I have nothing to back this up.

[Matt-Jensen]

Experiencing this as well. We added these lines of code a long time ago specifically for iOS safari, however they no longer seem to be working.

It's possible that due to updates on Safari that code is no longer working. However looks like Safari added support for the Clipboard API at v13.4. Which is great news because this repo is basically a bunch of hacks to get this functionality.

[www-chique]

I was facing the same problem for quite some time. And wasn't sure why it isn't working.
So I decided to debug, and found out some interesting things.

How I approached

1. It works totally fine if I use this code in a blank HTML document, with just the copy clipboard function.
2. So I wondered why it doesn't work in my project / app?
3. I took another example from StackOverflow that works, and then started comparing to see if I can find something.
4. It's the line that sets the "contain" style to "strict". If you comment it out, it works on iOS mobiles!
5. Great, but then why the same code works in an empty HTML page?
6. Wow, turns out if I turn off Tailwind's base (pre-flight) or CSS Reset styles, it works again!

My test
I modified the same function and changed just 1 line, and now it works fine with Tailwind as well.
However, I am not 100% sure about why this 1 particular style is preventing things from being copied though. Perhaps someone can shed more light on that.

Test here
You can check this out in this minimal reproduction.

Please help me test @Matt-Jensen , @thiessenp-cds. By the way, are any of you guys using Tailwind CSS or some sort of CSS reset?

If this turns out to be valid, I can submit a PR, since it's just a tiny change.

[Matt-Jensen]

@www-chique great investigative work here! Yes I was also experiencing the issue on a site with Tailwinds reset styles.

I'd like to help you debug more, but I've already migrated to the Clipboard API which works well for a critical majority of iOS Safari browsers.

[waynecz]

@www-chique Base on your investigation, I did a bit deeper debug, founded that it was:

1. contain: size: one of the rules of strict (yes, values other than strict and size will not cause this issue
2. padding: 0: from tailwind pre-flight

caused the copy in Safari not working, my guess is that these 2 css above make the textarea totally invisible and un-text-selectable, while in Chrome will not, so I create a reproduction link here

Safari	Chrome

And this invisible cause the element.select() did nothing (confirmed by setting width: 0; height: 0; to make it invisible in Chrome, then do .select() + .execCommand('copy') also failed)