search

microsoft / monaco-editor

A browser based code editor
https://microsoft.github.io/monaco-editor/
MIT License
39.11k stars 3.52k forks source link

Mouse selection displaced in Firefox when editor embedded in dom nodes using `translateX` #390

Open mhr3 opened 7 years ago

mhr3 commented 7 years ago

When using mouse selection in Firefox on mobile.azure.com, the cursor doesn't match the text that gets selected, see the following video:

monaco-selection

This might be related to our usage of CSS translate - a (non-direct) parent element in the DOM has translateX: 260px applied, which would seem to match the displacement. There's no such problem in Chrome/Safari nor Edge.

monaco-editor version: 0.8.3 Browser: Firefox 51 OS: MacOS

alexdima commented 7 years ago

2 years ago I filed a bug against Firefox, perhaps the usage of translateX triggers the same bug as translate3d.

-- https://bugzilla.mozilla.org/show_bug.cgi?id=1083132

We don't use translate3d in the editor implementation in Firefox because of this bug. We fall back to using top and left for scrolling in Firefox. The problem lies within Firefox and the incorrect results for getClientRects() calls. There is no known workaround.

jrmuizel commented 7 years ago

What do you use translate3d for in other browsers? It seems like it shouldn't be necessary in an editor.

alexdima commented 7 years ago

for speed

jrmuizel commented 7 years ago

speed of what? What's being translated?

alexdima commented 7 years ago

Using translate3d on the <div> containing the lines in order to implement scrolling, helps browsers save significant paint times, as the usage of translate3d helps them understand better what our custom scrolling does... it scrolls. So they can use the same pixel-shuffling optimizations that are used for native scrolling, so only the areas where lines are leaving the viewport or entering the viewport need to be repainted, all the other pixels get shuffled over from the previous frame.

ezgif-1-bcb1a3449c

jrmuizel commented 7 years ago

Using a regular translate() along with will-change: transform should give the same performance improvement, should be fast in Firefox and may avoid the Firefox bug that you're hitting.

alexdima commented 7 years ago

I don't think the will-change: transform will resolve the OP's issue. Under Firefox, the editor does not use translate3d. In this case, @mhr3 uses translateX on their webpage in an indirect editor container parent.. and hits the FF bug. e.g.

<div style="translateX: 260px">
  <div>
    ...
     <div id="monaco-editor-container"></div>
    ... 
  </div>
</div>