✅️リンクを出典アイコンにするUserCSSでリンクをクリックできない問題
まとめ
疑似要素をclick/tapすると、リンクが押される前に.cursor-lineへの変換が起きてしまう リンクの文字<span>を数文字表示させ、そちらを押すことでリンク先に飛べるようにした
とりあえずこれで解決とする
環境によってはリンクが押せないみたいtakker.icon
https://gyazo.com/b509a64e4bef7055ff11831062c87459
リンククリックより先に.cursor-lineへの変換が起きてしまう
これは困った
わかるyosider.icon
前は普通に押せていた気がするが、仕様変更とかあったのだろうか
内部リンクの場合は、変換後にもう一度本マークをクリックすれば一応飛べる
スマホでは飛べる
なぜ[/ ]とか他の修飾記法では、.cursor-lineへの変換が起きないのか?
[/ ]では、class="deco-/"に直接CSSが適用されるのではなく、<i></i>でwrapされて、それにデフォルトでfont-style: italicが適用されている
[- ]では<strike></strike>でwrapされる
[* ]では<strong></strong>でwrapされる
.cursor-lineへの変換が起きないことに関係あるのか?
<span class="deco-."></span>を適当にwrapしてみてもだめだった
aタグの文字列をクリックすると、変換の前にリンク先へ飛ぶ?
2021/12/13 外部リンクがクリックできなくなっているかも?基素.icon
https://gyazo.com/0dc5a1de0bd35b93654d0f8be95879af
前はできたような気がする
確認環境
Chrome バージョン: 96.0.4664.93(Official Build) (arm64)
Safari バージョン15.1 (17612.2.9.1.20)
文字ではなくafterやbeforeなどのアイコンを押すとダメ
これ、アイコンを追加してるbeforeやafterの中に pointer-events: none;ねじ込むのどうですか?iro.icon
効果なしでしたtakker.icon
そうでしたか…。お役に立てずすみませんiro.icon
自分はAndroid Chromeでしかscrapboxを使わないのですが、自分の環境に限ってはこれで解決してるっぽい動作をしていたので
アイコンを押すとブラケットが展開されてしまう→アイコンを押しても展開することなくリンク先に飛べるように
適当にいじってたら上手く行っただけなので、特にこれ以上の改善案もありません…