completer: popup positioning is wrong for transformed editor #5688
Open
Description
Describe the bug
I have an editor that is css-transformed (scaling and translation). The editor is working well thanks to the hasCssTransforms config property. However the completer popup is completely mis-positionned:
Expected Behavior
I would expect the popup to be positioned according to the transformed editor no matter its scaling/translation.
Current Behavior
The popup is positioning according to absolute screen coordinates.
Reproduction Steps
index.html
<!doctype html>
<html lang="en">
<head>
<title>ACE in Action</title>
<style type="text/css" media="screen">
#editor {
width: 1400px;
height: 1400px;
position: absolute;
transform: scale(0.4) translate(200px, 200px);
left: 0, top: 0;
}
.wrapper {
background-color: red;
width: 50000px;
height: 50000px;
position: relative;
}
</style>
</head>
<body>
<div class="wrapper">
<div id="editor">
function foo(items) { var x = "All this is syntax highlighted";
return x; }
</div>
</div>
<script
src="frontend/node_modules/ace-builds/src/ace.js"
type="text/javascript"
charset="utf-8"
></script>
<script
src="frontend/node_modules/ace-builds/src/ext-language_tools.js"
type="text/javascript"
charset="utf-8"
></script>
<script>
var editor = ace.edit("editor", {
mode: "ace/mode/javascript",
theme: "ace/theme/merbivore",
fontSize: 20,
hasCssTransforms: true,
enableBasicAutocompletion: true,
enableLiveAutocompletion: true,
});
editor.setTheme("ace/theme/monokai");
editor.session.setMode("ace/mode/javascript");
</script>
</body>
</html>
Possible Solution
No response
Additional Information/Context
No response
Ace Version / Browser / OS / Keyboard layout
1.36.5 / Chrome 131.0