Scrolling does not work in Firefox

[spahnke]

monaco-editor version: 0.16.0
Browser: Firefox 65.0.1
OS: Windows 10

Steps or JS usage snippet reproducing the issue:
Reproducible on the Monaco Website and in the playground.

Edit: It works with the keyboard (Ctrl+Up/Down), but not with the scroll wheel.

[jpetrucciani]

monaco-editor version: 0.16.0
Browser: Firefox 67.0a1 Nightly
OS: Windows 10

Also seeing this issue, only with the mouse scroll wheel.

Scroll bar click and drag works, as does Ctrl+Up/Down (as stated above)

[dodds-cc]

I have also found this bug. My Monaco editor is wrapped in quite a few nested flex box divs and thought that might be issue but the example on the Monaco website suggests otherwise.

I'm using react-monaco-editor v0.25.1, which is using monaco-editor v0.16.0 under the hood.
Browser: Firefox 65.0.1
OS: Mac OS 10.13.6

[olane]

Same issue on
monaco-editor version: 0.16.2
Browser: Firefox 67.0b3
OS: Windows 10

[georges-gomes]

Same here
monaco-editor: 0.16.2
browser: Firefox 67.0b3
OS: MacOS Mojave 10.14.3

[cgillis-aras]

I was also having this issue.
monaco-editor: 0.16.0
browser: Firefox 60.5.2esr
OS: Windows 10

It seems the issue is being caused because Firefox doesn't recognize the "mousewheel" event. Instead Firefox uses the "DOMMouseScroll" event. To work around this, I added an extra line in both mouseHandler.js and scrollableElement.js .

\esm\vs\editor\browser\controller\mouseHandler.js:
Before adding the event handler at the end of the MouseHandler constructor, register the "DOMMouseScroll" event for Firefox.

// IE9, Chrome, Safari, Opera
_this._register(dom.addDisposableListener(_this.viewHelper.viewDomNode, 'mousewheel', onMouseWheel, true));
// Firefox (added line)
_this._register(dom.addDisposableListener(_this.viewHelper.viewDomNode, 'DOMMouseScroll', onMouseWheel, true));

\esm\vs\base\browser\ui\scrollbar\scrollableEvent.js:
Similarly, push the "DOMMouseScroll" event in the _setListeningToMouseWheel function.

// IE9, Chrome, Safari, Opera
this._mouseWheelToDispose.push(dom.addDisposableListener(this._listenOnDomNode, 'mousewheel', onMouseWheel));
// Firefox (added line)
this._mouseWheelToDispose.push(dom.addDisposableListener(this._listenOnDomNode, 'DOMMouseScroll', onMouseWheel));

For my own purposes, I also had to make similar changes to the \min\vs\editor\editor.main.js

[yishn]

The mousewheel event is deprecated in favor of wheel (MDN), which all modern browsers (Firefox included) do understand.

[rudskoy]

Having this issue also at 0.16.1

Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:65.0) Gecko/20100101 Firefox/65.0 and macOS, Firefox 65.0.1

[bcolloran]

I'm also encountering this bug

Mozilla/5.0 (X11; Linux x86_64; rv:66.0) Gecko/20100101 Firefox/66.0

@cgillis-aras looks like you found a solution -- maybe the Monaco team would accept a PR? :-D

[bcolloran]

i went a head and filed a PR for this: microsoft/vscode#72832

as i mention there, unfortunately, @yishn's suggestion of just changing "mousewheel" -> "wheel" did not work for FF, but something based on @cgillis-aras's idea worked

[greggman]

Just noticed this. I've been using monaco on webglfundamentals.org for years, didn't know they were broken in firefox until today. Did monaco change or firefox? This used to work. I guess I can go test.

[greggman]

Okay, verified this is a regression. I was using monaco 0.9.0 until this weekend when I upgraded to 0.17.1. I works in v0.15.0 and fails in v0.16.0

Though it's always had issues in firefox even going back to 0.9.0

In 0.9.0 through 0.15.0 the mousewheel works but the page scrolls as well just slower (firefox only). Chrome and Safari the page doesn't scroll, only the editor contents.

Here's hoping whatever the fix is can make the behavior consistent. For now I'll switch back to an older version so at least the site is more functional.

[mattgodbolt]

Compiler Explorer is in the process of upgrading from Monaco 0.10.1 to 0.17.1 and we spotted this too. We're debating whether this is a blocker or not: we may downgrade to 0.15 and see if that's acceptable.

[bodinsamuel]

Hello team,
When can we expect the good PR of @bcolloran to be merged ? ☺️

[rebornix]

This issue is fixed in VS Code master branch and will be released with next Monaco update.

[pombredanne]

I wonder if this issue is related to the truncated copy/paste on Firefox in #1540

[zzeebbii]

Hello team,
I was wondering when this Monaco update will be available? And is there any temporary patch available in meantime?
@rebornix

[DenysVuika]

I am using 0.17.1 and the issue is still there. Any updates on the status of this bug?

[zzeebbii]

Hey @rebornix, Although the scroll issue in Firefox is fixed with new version of monaco-editor but speed of scrolling is very slow. It is scrolling one line at a time. You can check it on Monaco Website playground.
I am using latest version of Firefox and I tried it in Firefox Developer Edition too. Same results. Should I create a new issue for this?

[gippy]

Joining @zzeebbii 's message. Not only is the scrolling extremly slow, but also it works wonky with touchpad. Scrolling "up" works (slowly but not as bad as scrolling with mouse) but direction down does not work at all and just scrolls the whole page.

Browser version: firefox 69.0
OS: Windows 10 Pro - version 1903 - build number 18362.295

[DenysVuika]

I am using Firefox Developer Edition 70.0b3 and scrolling seems to be working fine for me.

[zzeebbii]

Hey @DenysVuika , I am also using the same version. Scrolling works but the problem is it is too slow. It is scrolling one line in Firefox but with same scroll movement, it is scrolling 25+ lines. So, its almost 25 times slower than the Chrome.

[ianberdin]

After updating from 0.17.1 to 0.18.0 appeared a new bug:
Compiled with 1 warnings warning in ./node_modules/monaco-editor/esm/vs/base/worker/defaultWorkerFactory.js Critical dependency: require function is used in a way in which dependencies cannot be statically extracted

monaco: 0.18.0
webpack: 4.35.3.
worker-loader: 2.0.0

With 0.17.1 works fine.

Workers loaded like this:

import CssWorker from 'worker-loader!../node_modules/monaco-editor/esm/vs/language/css/css.worker.js'
import HtmlWorker  from 'worker-loader!../node_modules/monaco-editor/esm/vs/language/html/html.worker.js'
import TsWorker  from 'worker-loader!../node_modules/monaco-editor/esm/vs/language/typescript/ts.worker.js'
import EditorWorker from 'worker-loader!../node_modules/monaco-editor/esm/vs/editor/editor.worker.js'

const extensionMap = {
  'css': 'css',
  'scss': 'css',
  'sass': 'css',
  'less': 'css',
  'html': 'html',
  'pug': 'html',
  'inky': 'html',
  'typescript': 'js',
  'javascript': 'js',
}

const workers = {
  css: CssWorker,
  html: HtmlWorker,
  js: TsWorker,
  editor: EditorWorker,
}

self.MonacoEnvironment = {
  getWorker: function ( moduleId, label ) {
    const workerType = extensionMap.hasOwnProperty(label) ? extensionMap[label] : 'editor'
    return new workers[workerType]()
  },
}

[ulrichb]

Follow-up issue: #1573 (comment)

[domoritz]

@ianberdin You already found #1572 but I wanted to link to it for anyone else running into the require function is used in a way in which dependencies cannot be statically extracted error.

[ransagy]

Scrolling seems to work well in 0.18.1 from what i can tell.

[zzeebbii]

Yes, @ransagy. It is working good in 0.18.1 now.