Windows/Chrome: Japanese IME suggestion list obscures inputted text

[MickMonaghan]

Env
Windows 10
Chrome v51
Japanese MS IME
CodeMirror: v5.13.2 (also exists in v5.16 - and earlier versions)

To reproduce:

• Open a code mirror mirror input area
• activate the Japanese IME
• type "nippon"
• suggestion list appears

Expected Result:

• list does not obscure the text that has been entered

Actual Result:

• text is significantly obscured.
  

[marijnh]

I booted windows 7 and enabled Microsoft Japanese IME, and it's allowing me to type Japanese characters, but never pops up a suggestion list (neither in CodeMirror nor anywhere else). Is there something else I need to enable to get that behavior?

[marijnh]

Oh, it was pressing space that triggered the menu. Unfortunately, on my system, both in Linux and Windows 7, the resulting widget is perfectly aligned with the bottom of the cursor. This might be related to your CSS -- could you see if it happens on the demo pages on http://codemirror.net on your system? If not, it would be helpful if you could set up a minimal demo page with your CSS in it that allows me to reproduce the issue.

[marijnh]

On closer look at the screenshot, that is the project page, so I'll see if I can install windows 10 to see if it reproduces there.

[marijnh]

Okay, on Windows 10 with Chrome 51 I could reproduce this. Attached patch works around the issue.

[marijnh]

Um, I mean patch 51a1e7d, which I attached to the wrong issue.

[MickMonaghan]

Excellent @marijnh - thank you. Looks good to me also.

[adrianheine]

Apparently this is fixed, great!

[tamo]

It seems that something is wrong with Firefox.

codemirror5/src/input/input.js

Lines 123 to 124 in e1fe210

	let te = elt("textarea", null, null, "position: absolute; bottom: -1em; padding: 0; width: 1px; height: 1em; min-height: 1em; outline: none")
	let div = elt("div", [te], null, "overflow: hidden; position: relative; width: 3px; height: 0px;")

The wrapping div should have height, shouldn't it?

This code

 let te = elt("textarea", null, null, "position: absolute; top: 0; bottom: 1em; padding: 0; width: 1px; height: 1em; min-height: 1em; outline: none") 
 let div = elt("div", [te], null, "overflow: hidden; position: relative; width: 3px; height: 1em; margin-bottom: -1em;") 

would produce something better, like this:

(1em should be replaced with 1.5em (==line-height) also?)

I'm not familiar with CSS. You all must know better. Thanks!