⚠️ Web Editor Broken on Firefox

I was just trying to drag blocks into a new rule in the web editor, but it ended up throwing an error in the console, preventing any new blocks from being dragged in.

The error is thrown when:

  • A new text is dragged in - not a character or object though, strangely
  • Any new rule, block or ability is dragged in
    (I was able to drag in the new When 7 = 7 rule shown in the video by dragging it in, getting the error, saving the project and then reloading the editor. Basically, you can only drag in one block per session.)

I’m running this on Firefox version 104.0 on Arch Linux. I was also able to reproduce the error on Windows 11 with Firefox 104.0 (same version, they’re both latest).

See this video for more info:

Here’s what the console looks like on Windows 11:


@Awesome_E @Yuanyuan I hope this helps!

12 Likes

Thanks – adding to the list

8 Likes

(i edited the category)

6 Likes

Note that I realized after recording that my Firefox has a bunch of script blockers on it. I installed a fresh vanilla copy of Firefox Developer Edition with the same error, though.

Although I enabled all of the JS in the recording, some of the errors shown in console in the OP might not be there on your side @Awesome_E and that’s just probably a side effect on my side. Please disregard the extraneous stuff if you end up looking into those, haha :)
The main error is hit on vanilla Firefox too though.

Sorry about that!

7 Likes

Yeah, I know. For some reason, scrollIntoView is not supported in Firefox… I thought it was standard!

6 Likes

Yeah, that’s actually really weird -

  • scrollIntoView is supported everywhere but Safari?
  • scrollIntoViewIfNeeded is supported everywhere but Firefox?

I guess there’s a polyfill that would fix it haha

6 Likes

You’d hope browser support would be better than that…

7 Likes

Does this website work okay on Microsoft Edge?
If it doesn’t then I can’t make Hopscotch projects on my laptop :((

2 Likes

you can probably do Element.scrollTo = this.scrollIntoViewIfNeeded || this.scrollIntoView; then ...querySelector('abc').scrollTo()

2 Likes

Edge is a Chromium-based browser, so it should work fine

  1. Scroll to is also the name of a different function
  2. It’s bad practice to extend native classes
  3. Always calling scrollIntoView is not the right solution because if it’s on screen already it will still shift.

This will probably need a polyfill[1] to solve properly


  1. extra code that’s designed to have the same behavior as the missing one ↩︎

2 Likes

oh whoops

I see

a google search returns some

2 Likes

yeah I’ll get to it next week

3 Likes

Here’s a temporary fix for anyone that does want to use the editor in Firefox! Instructions to install the workaround are in the GitHub repository below. :)

You can use this Tampermonkey script until the web editor gets patched sometime this week!

(CC @Awesome_E - you might want to check the script file to see the polyfill I used! It was really easy to implement!)

1 Like

I think there’s a newer polyfill that I might use instead – hopefully I can get it in given the code reorganization I’m going to need to do first

1 Like

I’ll look around for it!

1 Like

Well, I have a 1 week sprint… so it shouldn’t be long! or at least I hope it won’t be long

1 Like

We’ve updated the web editor so that it’s at least usable with Firefox. There’s still some behavioral differences as well as things that don’t work in Firefox (such as undo/redo – the stack is there, but undo doesn’t work the same). You will still be able to use & enjoy the rest of the editor without it breaking right away though!

2 Likes

This topic was automatically closed after 4 hours. New replies are no longer allowed.