新しく追加されたThemeでコードの文字選択がバグる

いつもScrapboxを使わせていただいております

先程新しく追加されたThemeですが、どのThemeにしてもコードの文字選択にズレが生じるというバグが発生していますtakker.icon

https://i.gyazo.com/thumb/1000/9618622ae2ed2d544aeb523fa2a4a8cf-gif.gif

おそらく原因はfilter: invert()です

理由はわかりませんが、この色反転用filterを使うと、div.cursorとdiv.selectionの位置計算がおかしくなるようです

dark theme以外のThemeでも、--invert-color: invert(0%)が悪さをして文字選択をずらしてしまっているようです

https://i.gyazo.com/thumb/1000/4070175e09fe34121dacd6c2c7a0d20e-gif.gif

開発ツールで--invert-colorをOFFにすると直ります

Classic ThemeとLightでは--invert-colorがないので発生しません

現状だとThemeを変えただけで文字選択がバグってしまいます。filter: invert()を使わないでDark themeを実装し直すか、filter: invert()ありでも文字選択がずれないようにしていただけると幸いです

参考までに、filter: invert()を使用せずにdark themeにするUserCSSを載せておきます：

応急処置法

以下をUserCSSに追加すると直ります

code:css

html {

--invert-color: unset !important;

}

Classic ThemeかデフォルトのLightに切り替えても直ります

動作環境

Firefox 84.0.1

Google Chrome 87.0

ありがとうございます。調べますshokai.icon

修正しましたshokai.icon

filter: invert(100%)使うのやめた

dark/lightのテーマ毎にシンタックスハイライトに使うスタイルを切り替えるようにした

迅速に修正していただきありがとうございます！takker.icon