画面幅が広いときCSSを書き換えて.expandable-menuを表示させる設定にすると、UserScriptで追加したPageMenuが表示されない
assets-20220928-084433からの仕様変更
解説
assets-20220928-084433より、.expandable-menuにUserScript由来のPageMenu(.page-menu-extension)が表示されるかどうかは、script内で画面幅から判定している
画面幅が広い場合は、どんな状態でも.page-menu-extensionが.expandable-menuに生えない
Firefox 105.0.1 @Windows11で、.expandable-menuのdisplay: none;を開発ツールから消した状態で撮影したGIF
https://gyazo.com/92fa522ab0073763dcd1435b0769f843
画面幅が狭いもしくは狭くした場合、カーソルの状態変化をトリガーに.page-menu-extensionが.expandable-menuに生える
同環境で撮影
https://gyazo.com/aaa9e59dcf3acc0b2bdf086d01bb5dfd
Chrome for Android @Android12
https://gyazo.com/606ba39330dd86302638c3377efe2687
対策
仕様変更をお願いする
.expandable-menuに常に.page-menu-extensionをrenderingし、CSS側で表示非表示を切り替えるようにすれば、ズレがなくなる スマホを縦画面で使う
/vim-jp-emojis/hai-small.icontakker.icon
スマホは横画面で使う派なので、この方法はあんまりやりたくない
加えて、縦画面だとPage Menu押しにくい
.col-page-side .page-menuを.nav-barの下に持ってくる
/mijinko/mijinko_sd.iconさんが使っていたUIのイメージ
案1
code:案1.css
.page-menu {
position: fixed;
transform-origin: top right;
transform: rotate(-90deg) translateY(-100%);
}
アイコンが横倒しじゃん……
https://gyazo.com/85fd60f47e47fa1e0e7892814be206e9
違う。そうじゃない
https://gyazo.com/daa7c9d54f6aced7012da19651939997
✅案2
以下、原因がわからなかった時のメモ
2022-09-28時点で調べたこと
不具合
Reactに情報が送られていない？
Firefox@WIndows11でのGIF
UserScriptを無効にして撮影した
https://gyazo.com/ee73685ef0e8a24da38a254c849816f3
再現できた環境
chrome for Android @Android12
Firefox 105.0.1 @Windows11
再現できなかった環境
Google Chrome 105.0.5195.128 @Windows11
https://gyazo.com/25b3e37dc3ff314b3e810327d474eea4
/shokai/shokai.iconさんの環境だと問題なく表示されているようだ
環境はtweet参照
場合によってはtakker.iconの環境だけ表示されていない可能性がある
同様の不具合を訴えているひとが一人もいないので、ありえなくもない
その場合はUserScriptのせいだな
DOMごとなくなっていたので
しかしそんな挙動をしそうなUserScriptなんて一つも入れていないのだが……
ともかく、明日もう一度laptopで調べよう
スマホだと調べられない
2022-09-29
06:20:55 わかってきた
06:16:05 検証途中で挙動が変わり始めて、PageMenuが生えるようになった？！
どうなってんねん