[N]ボタンがズームスライダーにかぶる問題(一応対処した)・ボタンの大きさの問題(未解決)

[aidmiya]

map.htmlで、firefox・Safariにおいて、[N]ボタンがズームスライダーにかぶる問題がありましたが、自作ボタンの大きさの問題と関わっているようなのでIssueを立てることにしました。

問題は何か

1 [N]が、一部ブラウザでズームスライダーにかぶる

この問題はkobakazuにすでに言っていました。

被るブラウザは

• Firefox
• Safari(iPhoneにて確認)

被らないのは

• Chrome
• Chromium

2 自作ボタン([≡])の大きさがブラウザによって違う

この問題は初提起だと思います。

ボタンのfont-sizeが大きい(1.5em)ブラウザは

• Firefox
• Safari

小さい(1.14em)ブラウザは

• Chrome
• Chromium

で、問題1とグループが同じです。

何がいいたいか

検証ツールで調べたところ、Firefox-とSafari-(Safariは未検証のため削除)には、様々なボタン([i]も[N]もみんな)にまるごと.ol-touchclassが与えられていますが、Chromeなどにはそれが与えられていないことがわかりました。

つまり、.ol-touchが与えられたボタンは文字が大きく、**[N]**がかぶります。与えられていなければ文字が小さく、[N]はかぶりません。

.ol-touchが与えられる/られないのブラウザ間の違いは、なぜ起こるのか推測できますか。また、この問題をどう解消すればいいと思いますか。
長文になりましたが、こんなところです。

[aidmiya]

ちなみに、Chromiumでの検証ツール画面はこちらです。

そして、Firefoxでの画面です。

私は現在Firefox側に合わせ、自作ボタンは.ol-touchをつけていますが、今後どうするかは決めていません。
[N]が被る問題はセレクタをいじればどうにかなるかもですが、[≡]はuser-agentで無理やり変えるのは好ましくなさそうだけど、他に対処法が思い浮かぶかといったらそうじゃない、といった気持ちです。

[aidmiya]

[N]は、map.cssを調整して、CSSの詳細度を利用して上書きする方式で被らないようにすることができたと思います。
pushしたので見てみてください。