Overview

デザインに関する修正を行いました。見た目の変更というより、iOS対応のための処理方法の変更が中心です。

Description

島未登録時のトップページの表示変更 (fixed #127)

島が登録されていないとき空白が表示されたりしてデザインがあまりよくなかったため、修正を行いました。

RankingViewer 「島が登録されていません」という表記が出るように変更
LogViewer ログがないときは表示しないように実装を変更

LogViewerのデザイン修正

ボックスの角丸のRを微調整
島編集・閲覧画面でmd:max-lg:の時に左右にパディングが発生するように変更

島編集・閲覧画面のデザイン変更

max-md:の時のコメント入力欄のデザイン変更
max-md:にてx軸に不要なスクロールバーが表示される問題の修正
- 以前デバッグ時に追加したものが残っていたようです。すいません。

iOSデバイスでdrop-shadowが正常に機能しない問題の修正 (fixed #130)

本PRの一番大きい修正箇所です。 iOSデバイスでTailwindのdrop-shadowが機能しない問題を修正しました。 LogViewerとRankingViewerそれぞれ異なる要因でこの問題が発生していました。

overflow-hidden問題の修正

iOSデバイスでは overflow-hidden と drop-shadow が同時にアタッチされているとき、overflowした分の影が切り取られてしまうため、四隅の角以外の影が表示されないようなおかしな表示になっていました。

本来親要素のroundedに合わせてoverflow: hiddenで切り取りたいところではありますが、LogViewerの .subtitle の中の要素も親要素と同じroundedを当てて、overflow-hiddenを取り除くことで対応しました。

アニメーション終了時にdrop-shadowが消滅する問題の修正

今までの実装の場合、アニメーション終了時にdrop-shadowが正常に動作しなくなることがあり、上記overflow: hiddenの時と同じように影が四隅以外につかなくなることがあります。

原因としてはiOSでの実装の問題のようで、アニメーション終了時に自動的にGPUアクセラレーションが止まる仕様なのですが、これが 画面全体 のCSSのフィルタ要素を使ったプロパティに対しておかしなレンダリング結果が返ってくるように見えます。質の悪いことに、アニメーションしていない全く関係ないDOM要素（LogViewer）のdrop-shadowが消えることもあるようですが、普通に書いてある

については影が消えないものの、Vueのコンポーネントに関しては消えてしまったためレンダリング方法による違いがありそうです。

対策として transform: translateZ(0) を指定することによりGPUレイヤーの作成を促すのが定石になっています。 https://zenn.dev/kibe/articles/659dadd1d6426c

またアニメーション終了時にtransformのパラメータを保持するようにしておかないと終了時にGPUレイヤーが削除されてしまうためアニメーションの実装についてもやや変更してあります。

mjtakenon / hakoniwa

デザイン修正およびiOSに起因する問題の解決 #142