Facebook Instant Copy/Share blue overlay (SOLVED?)

Bugs
#1

When testing on iOS, my Facebook Instant HTML5 game has had an issue where Safari’s default Copy/Share functionality sometimes trigger, which also means a blue overlay shows as if you want to copy and share THE ENTIRE GAME.

After some googling I found a way to possibly disable this behaviour in Safari. After applying this fix I haven’t been able to reproduce it, so I thought I’d share.

In the default Facebook Instant HTML template I changed this:

div {
    -webkit-tap-highlight-color: rgba(0,0,0,0);
}

To this:

div {
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    -webkit-user-select: none;
}

I’ll continue testing and post back here if the bug comes back.

2 Likes
#2

Interesting. We’d happily accept a PR for this if it works well.

1 Like
#3

It appears to have fixed the issue! As a side note, these tags already appear to be part of the default HTML template (not the Facebook Instant one):

.fb-root {
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

Might be best to include the lot?

Edit: Created a pull request with these changes.

3 Likes