5.4.1がリリースされたばかりで恐縮ですが…以下ご報告します。
バグ報告
IME変換時の候補ウィンドウが、入力中の文字列に被って表示される。
Windows 10標準のMicrosoft IME、およびATOKで確認しましたがいずれも同様の状況です。
利用環境
- Platform: Windows
- Platform version: 10
- App Version: 5.4.1
Otawaraさん
ご報告ありがとうございます。
エディタに関しては特に変更を加えていないのですが、これはv5.4.1から発生する現象でしょうか？
すみません、実はここ数ヶ月、溜めていたノートを読み専的に使っていたので直前のバージョンでどうだったかが分からないんですよね…。とはいえ、以前からこのような状況ではなかったと思います（さすがにこのような状況だったら気になるので）
Inkdropを再起動してみたところ、見え方が少し変わりました。ほぼ完全に被っていたものが、文字の下2割程度に被る状態になりました。
この状態からしばらく使っていると、最初にご報告した、ほぼ全て被る状態になってしまったので何かしらの契機があるのだと思いますが、今のところ不明です。何か分かれば追記します。
Inkdropを再起動してみたところ、見え方が少し変わりました。ほぼ完全に被っていたものが、文字の下2割程度に被る状態になりました。
ちなみに上記の「少しだけ被っている」状態ですが、Line Heightの設定値によって起こっているようです。（本トピックの不具合とは直接関係しないかもしれません）
上記の状況では Line Height: 1.5 で使用していました。Line Height: 3 にしてみたところ、以下のように入力中の文字と被る状態になりました。
以下のような Line Height: 1 のときの表示（入力中文字と全く被らない）が理想です。
詳細な調査ありがとうございます。
手元でも再現できたのですが、イマイチ原因が分かりません。
v5.3.1でも再現できたので、最近のリリースが起因ではないようです。
Windowsの最近の変更が影響しているかもしれません。
しかしながらCodeMirrorのサイト上では発生していないので、アプリ依存だと思われます。
原因が分かり次第、対応したいと思います。
こちらmacOSでも確認できたのでWindows依存では無さそうです。
1 Like
ひとまずのworkaroundとして、以下のスタイルシートをstyles.less で当ててみてください：
.editor .mde-cm-wrapper .CodeMirror {
padding: 10px;
.CodeMirror-scroll {
padding: 0 !important;
}
}
1 Like
ありがとうございます！ひとまず Line Height: 1.5 設定であれば、しっかり入力中文字が見えるようになりました。
ちなみにですが、 # ~~~ の見出し中における変換ウィンドウも被っていました。（これも Line Height が広くなることによる影響かと思うので、根本対策がなされれば解消される気がしますが）
ご確認ありがとうございます。
font-sizeが加味されていないようです。
引き続き原因調査しますが、根深そうな予感がします。
Gotcha!
こちら原因が判明しました。Semantic UIのReset CSSが影響していた模様です。
以下のStylesheetの適用により、リセットされたものを"リセット"します lol
.CodeMirror textarea {
box-sizing: content-box !important;
line-height: normal !important;
font-family: monospace !important;
}
先日のWorkaroundを削除して、こちらを試していただけますでしょうか？
それから、見出しに関してはどうやらCodeMirrorの仕様で回避できないようです。
理由は、入力を受け付ける textarea の font-size は .CodeMirror を inherit しているからです。
そのため、行ごとのフォントサイズの違いは残念ながら扱えません。
次のリリースにて適用します。
1 Like
こちらにパッチ済みをビルドしました。ご確認お願いいたしますー
https://inkdrop-dist.s3.ap-northeast-1.amazonaws.com/tmp/Inkdrop-5.4.1-Windows-patch-1.zip
調査ありがとうございます。
残念ながら、私の環境では変わらないですね…
line height: 1.5 の場合
line height: 3 の場合
Inspect Element を見ると以下の通り先ほど記載頂いたCSSが見えるので、修正は適用されているとは思うのですが…
なるほど。では line height によっては変換ウィンドウが入力文字に被ってしまう問題については、引き続き最初のワークアラウンドで頂いていたスタイルを適用して対処する必要があるということですね。了解しました。
また、別事象ですが以下のように1文字入力する度に変換ウィンドウが少しずつ左に寄っていってしまう状況が見られました。頂いたパッチ済のバージョンで確認しています。
そうですね、 .CodeMirror 自体に padding-top を追加するとその分だけ変換ウインドウも相対的に下に下がるようです。ただしそれもCodeMirrorの意図しない挙動のように感じるので注意です。
変換ウインドウが1文字入力ごとに左にずれていく現象は、macOSおよびWindows 10 + Microsoft IMEの僕の環境では再現できませんでした。ATOK依存の問題かもしれません。
根本解決としては、現在開発中の新CodeMirrorにアップグレードする事でしょう。
しかしながらまだ開発途中である事と、多くのbreaking changesを伴うので、プラグインのアップグレードも含めて慎重に行う必要があります。それはまだ先になりそうです。
ひとまず、すべての環境にてIME変換ウインドウがズレてしまうという致命的な問題は解決したため、このfixでリリースしたいと思います。
ただ別事象であることには違いないので、トピックを別に立てたいと思います。
…と思いましたが、そもそもまだリリース前のパッチで確認した事象なのでトピックを分けない方がいいでしょうか？
再現できるといいのですが、エディタの設定を教えていただけますか？
以下の通りです。
styles.less にも設定がありますが、こちらは全て除いても状況に変わりはありませんでした。
.sidetoc-pane {
li::before {
content: '';
position: absolute;
top: 9px;
left: 0;
width: 3px;
height: 3px;
border-radius: 50%;
border: 3px solid;
}
li {
position: relative;
display: block;
padding-left: 13px;
}
}
// スクロールバーが右ドロワーに被ってしまう問題のワークアラウンド
.CodeMirror-vscrollbar,
.CodeMirror-hscrollbar {
z-index: 3;
}
// 変換窓が入力中文字に被る問題のワークアラウンド
.editor .mde-cm-wrapper .CodeMirror {
padding: 10px;
.CodeMirror-scroll {
padding: 0 !important;
}
}
フォント以外の設定を揃えてみたのですが、再現できませんでした。奇妙ですね。
フォントを monospace にしてみても改善しないでしょうか？
FIY: ちなみにスクロールバーのz-index問題もパッチで修正済みです。