cpprefjp / kunai

cpprefjpのフロントエンド
MIT License
3 stars 7 forks source link

サイドバーをスクロールできない #63

Closed yumetodo closed 6 years ago

yumetodo commented 6 years ago

Windows 10環境下にてChrome以外でサイドバーをスクロールできない。スクロールバーが無効でマウスのスクロールも効かない。

saki7 commented 6 years ago

サイドバー(ツリー)のそれぞれの要素は、親要素(Flexコンテナ)のサイズに依存して自動でサイズが決まります。実はここにはJavaScriptのコードによる動的なサイズ調整は1か所も含まれておらず、全てCSSのFlexboxで決定されています。

そのため、要素の高さを決定するためのCSSをミスした時点で、全ての子要素の高さが正しく決定されなくなります。これには、たとえば、見た目的には正しく見えていても、ブラウザの開発者ツールで数値を見た時に高さがゼロになっているものなどもあります。

僕の開発環境(Chrome, Ubuntu)で正しく見えているのは、たまたま見れているだけだと思います。kunaiのcssのどこかに、Flexboxの高さの決定(例えばjustify-content)のコードが間違っている箇所があると思います。これを正しくすれば、親要素が正しく overflow-y: scroll すると思います。

デバッグの方法としては、ブラウザの開発者ツールを使って、右上に出るHTMLの要素ごとのプレビューボックスを見て、 width とか height が実際の見た目と一致しているかというチェックが使えます(手動です)。

これが直った場合、 #58 と #59 が同時に直る可能性が高いです。この問題は根が深いですが、重要度は非常に高いです(僕はすぐに原因は思いついていません)。

yumetodo commented 6 years ago

Ubuntu 16.04.3 LTS Firefox 56.0でも再現

image

私自身は来週木曜日くらいまでデバッグに取り組めなさそうです・・・