Extreme glitchiness (pardon the pun with this file https://glitch.com/edit/#!/emoji-mascot-generator?path=server.js:87:6
Steps for me to reproduce the issues:
1: Highlight/selection issue
Load in Chrome
Remix from https://glitch.com/edit/#!/twitterbot-autorespond?path=README.md:1:100
(Expected: stays highlighted. Actual: Removes selection immediately)
This broke everything else that used highlighting too: copy/paste, ask for help, etc.
2: Mismatch between front-end and server
I loaded in Safari to see if it was the project or the browser
Everything was out of order. It was as if all my attempts to copy/paste or delete had succeeded on the backend but not the front end, resulting in a dozen or so blocks of code being out of order. Then I refreshed in Chrome and saw the same out of order view.
Editing only in Safari seems to have fixed this. I started over from scratch but man, what a bug.
More evidence for my “front-end/back-end mistmatch” theory is that I was getting nonsensical errors in the logs in Chrome. (“parse error: Objects must consist of key:value pairs at line 13, column 2”). There was no syntax error in Chrome (I put the entire object declaration through lint - not just that line - and I even tried rewriting from scratch). Everything passed. However when the mangled code loaded in Safari, it was obvious that there were many parse errors.
Per Anil’s question on Twitter, I do have some chrome extensions that can modify the page (though I’ve never had issues like JS or HTML interference before). Namely: Ad Block Plus, Amazon Wish List, LastPass, Highly, Pocket, Pinterest, The Great Suspender, Video Speed Controller, and MetaMask. Safari only has LastPass installed.
Sorry you can ran into this. We haven’t seen this come up before, so we’re keen to understand the cause. Does this happen consistently in your Chrome with other projects too? If so, if you could try an incognito window which doesn’t have the plugins running, that would help us narrow down the cause.
It does happen consistently, in every project, and every file except README. Probably not a coincidence that README’s don’t have the “ask for help” button. In the console, I get some warnings, but nothing obviously related.
It doesn’t happen in Incognito mode (which only has Adblock Plus). And good news: I was able to enable/disable extensions until I think I found the problem. It disappears when I disable Highly.
I think something about a conflict between your code and Highly is causing the highlighting and front-end sync issues. As luck would have it, I know those guys, so I could intro if that’s helpful.
@Gareth I chatted with the Highly devs and I think I may have actually been able to resolve this!
I think the upshot for you guys is: Is it possible that any extension that also tries to use text selection leads to breaking issues in Glitch? (eg the issue I had where the server stored different code than the UI showed). If you want to dig into this with Highly I’d be happy to intro you.
The fix, per Highly:
- They’ve gotten reports of this before
- They added Glitch to a list of sites they pro-actively ignore
- New Highly users get the new ignore list
- Old Highly users should make sure they have the latest version (I did) and disable/re-enable the extension (which erases the cache & pulls the new list).
After re-enabling, I can’t repro the bugs anymore, so it seems to work!
Perfect, thanks for the assist @staringispolite Highly here, this is our quick fix, we’ll see what we can do going forward to avoid having to block the domain entirely. But we play well with static text and not so much with input/editable content. Cheers!
Thanks for following up on this with them and for the quick fix @wuebben. This might explain why I was unable to reproduce trying this out with my own highly extension, as perhaps it had already been blocked!