ACE 编辑器问题 - 选择编辑器时网页跳转答案

【问题标题】：ACE Editor Issue - Webpage Jumps on Editor SelectionACE 编辑器问题 - 选择编辑器时网页跳转
【发布时间】：2017-12-23 20:21:51
【问题描述】：

我在我的网页上使用 Javascript 中漂亮的 ACE 编辑器。但是，我遇到了一个我无法找到答案的问题。

有时当我在编辑器中选择文本（或者直接在编辑器中单击）时，网页会迅速跳上几百像素。我一直无法消除这个问题，但我发现了一些更有可能发生的情况：

网页未全屏
我的页面上有不止一个 ACE 编辑器
ACE 编辑器未完全在视图中（部分在寡妇上方或下方滚动）

这里有一些屏幕截图，只是为了让您了解我的意思。

几乎每次我在编辑器中单击时都会发生这种情况，直到我使用箭头键取消选择。

我已经检查过以确保我使用的是最新版本的 ACE，并已尝试删除大部分操纵它的额外 Javascript。唯一我无法确定任何代码行是问题所在。如果我只有这个 Javscript 与编辑器一起工作，就会发生这种情况。我已经系统地删除了所有内容，它仍然可以这样做。

var validatorEditor = ace.edit("custom-validator-editor");
validatorEditor.$blockScrolling = Infinity;
validatorEditor.setTheme("ace/theme/xcode");
validatorEditor.session.setMode({ path: "ace/mode/c_cpp", inline: true });
validatorEditor.resize();

var generatorEditor = ace.edit("output-generator-editor");
generatorEditor.$blockScrolling = Infinity;
// generatorEditor mode is set dynamically later on usually
generatorEditor.setTheme("ace/theme/xcode");
generatorEditor.resize();

有什么想法或建议吗？

谢谢！

【问题讨论】：

标签： javascript ace-editor

【解决方案1】：

经过几个小时的深入研究，我发现一些 CSS 导致了这个问题，即

.parent-div{
    transform: translateX(10%);
}

其中的任何值都会在您关注它时使编辑器跳转。

【讨论】：

看起来 ace.js 文件修改了转换值，所以我对 CSS 的更改覆盖了该更改。