IME candidate list is positioned incorrectly the first time in a new window

[tjx666]

One important thing is that there should be space before text

Test words:

    console.log('可');

Version:

MacOS: 12.3.1
VSCode: 1.67.0-insider
Input: https://pinyin.sogou.com/mac/

2022-04-22.16.17.04.mov

[tjx666]

@alexdima

[alexdima]

@tjx666 I cannot reproduce with the macos builtin "Pinyin - Simplified" input method. Does this reproduce only with Sogou?

Kapture.2022-04-25.at.08.19.11.mp4

The positioning seems off by a factor of 2. Are you using zooming (window.zoomLevel) or an external monitor?

[tjx666]

@alexdima I can only reproduce it in my external monitor when I set: "window.zoomLevel": 1.

My macbook pro can't reproduce it. In my monitor, after I remove zoom settings, this issue can be fixed.

[alexdima]

@tjx666 I have tried "window.zoomLevel": 1 on two external monitors, one which is 4K and one which is 1920p and I could not reproduce with the macOS builtin "Pinyin - Simplified" input method.

1. Does this reproduce with the macOS builtin "Pinyin - Simplified" input method?
2. Does the IME popup render correctly when using Chrome or Edge and zooming in on a web page using cmd++?

[tjx666]

1. Does this reproduce with the macOS builtin "Pinyin - Simplified" input method?

Yes，I can.

2. Does the IME popup render correctly when using Chrome or Edge and zooming in on a web page using cmd++?

Not understand this question clearly. When the IME popup showing, I can't using cmd + + shortcut. After zoom the web page, seems nothing strange.

I even found another issue, there is verticle bounce:

2022-04-27.16.22.58.mov

// @include '../index.jsx'

(function(){
    var LayerTypes = $.__hammerExplorer.LayerTypes;
    var resolveLayerType = $.__hammerExplorer.resolveLayerType ;


    /**
     * 预处理
     * @param {CompItem} comp 
     */
    function proprocess(comp) {
        // 音乐放到
        for (var i = 0, layer, layerType; i <= comp.numLayers; i++) {
            layer = comp.layers[i];
            layerType = resolveLayerType(layer);
            if (layerType === LayerTypes.Audio) {
                var effectsPropertyGroup = layer.property('ADBE Effect Parade');
                if (effectsPropertyGroup) {
                    var GD_AudioEdit = effectsPropertyGroup.property('GD_AudioEdit');
                    if (GD_AudioEdit) {
                        layer.moveToEnd();
                        break;
                    }
                }
            }
        }
    }
})();

[tjx666]

I scale my monitor to 1600 x 900. @alexdima

[alexdima]

@tjx666 I could not reproduce, the IME popup always showed up at the right spot for me, even after I tried all scaling combinations for my monitors, together with "window.zoomLevel": 1.

Does this reproduce when running with default settings? i.e. commenting out all other settings except window.zoomLevel. Is there another setting that you might have which could be impacting to the repro?

When I meant to try out Chrome or Edge, I meant to first zoom in once using cmd++ or the ... menu > Zoom. This would be equivalent to VS Code's "window.zoomLevel": 1. Is the IME positioned correctly when opening this page and typing in this comment input area?

[tjx666]

@alexdima I found it is also related with "editor.fontFamily" setting, I using the Fira Code font.

[alexdima]

@tjx666 Thank you for the extra info, unfortunately I could still not reproduce. Does this reproduce for you if you quit VS Code, connect the external monitor, and only then launch VS Code?

[tjx666]

I forgot to tell you that you must add some space before the test code:

// !: add 4 space before console.log
    console.log('可');

The horizontal shakeing reproduce need tow setting:

{
    "editor.fontFamily": "'Fira Code'",
    "window.zoomLevel": 1
}

[tjx666]

I can also reproduce it with only window.zoom setting in my macbookpro monitor setting:

2022-04-28.22.25.08.mov

test words:

// 我

[alexdima]

Today I managed to reproduce the bad positioning of the IME candidates using exactly the following steps:

• to visualize where the textarea is the following patch can be applied:

diff --git a/src/vs/editor/browser/controller/textAreaHandler.ts b/src/vs/editor/browser/controller/textAreaHandler.ts
index a8a0a6d985e..c67eafaee9b 100644
--- a/src/vs/editor/browser/controller/textAreaHandler.ts
+++ b/src/vs/editor/browser/controller/textAreaHandler.ts
@@ -795,8 +795,10 @@ export class TextAreaHandler extends ViewPart {
 		applyFontInfo(ta, this._fontInfo);
 		ta.setTop(renderData.top);
 		ta.setLeft(renderData.left);
-		ta.setWidth(renderData.width);
-		ta.setHeight(renderData.height);
+		ta.setWidth(renderData.width + 20);
+		ta.setHeight(renderData.height + 10);
+		ta.setBackgroundColor('red');
+		ta.domNode.style.color = 'white';
 
 		ta.setColor(renderData.color ? Color.Format.CSS.formatHex(renderData.color) : '');
 		ta.setFontStyle(renderData.italic ? 'italic' : '');

• Kill VS Code dev and leave an editor focused
• Launch again ./scripts/code.sh
• Type s using the Pinyin-Simplified input method
• The IME candidate list is not rendered next to the <textarea>:
• If clicking in the page or focusing a different editor before typing s, the IME candidate list is positioned correctly.

Kapture.2022-04-29.at.15.29.39.mp4