Closed nonuplet closed 1 year ago
デザインに関する修正を行いました。 見た目の変更というより、iOS対応のための処理方法の変更が中心です。
島が登録されていないとき空白が表示されたりしてデザインがあまりよくなかったため、修正を行いました。
ランキングのデザイン修正を行いました。
億円の表記がlg:で縦書きになってしまい、それに引っ張られて値がずれる問題の修正
md:max-lg:の時、「資源」のセクションの右側にborderが表示されずバランスが悪くなっていたため修正
max-md:の時のコメント入力欄のデザイン変更
max-md:にてx軸に不要なスクロールバーが表示される問題の修正
本PRの一番大きい修正箇所です。 iOSデバイスでTailwindのdrop-shadowが機能しない問題を修正しました。 LogViewerとRankingViewerそれぞれ異なる要因でこの問題が発生していました。
iOSデバイスでは overflow-hidden と drop-shadow が同時にアタッチされているとき、overflowした分の影が切り取られてしまうため、四隅の角以外の影が表示されないようなおかしな表示になっていました。
overflow-hidden
drop-shadow
本来親要素のroundedに合わせてoverflow: hiddenで切り取りたいところではありますが、LogViewerの .subtitle の中の要素も親要素と同じroundedを当てて、overflow-hiddenを取り除くことで対応しました。
.subtitle
今までの実装の場合、アニメーション終了時にdrop-shadowが正常に動作しなくなることがあり、上記overflow: hiddenの時と同じように影が四隅以外につかなくなることがあります。
原因としてはiOSでの実装の問題のようで、アニメーション終了時に自動的にGPUアクセラレーションが止まる仕様なのですが、これが 画面全体 のCSSのフィルタ要素を使ったプロパティに対しておかしなレンダリング結果が返ってくるように見えます。 質の悪いことに、アニメーションしていない全く関係ないDOM要素(LogViewer)のdrop-shadowが消えることもあるようですが、普通に書いてある
対策として transform: translateZ(0) を指定することによりGPUレイヤーの作成を促すのが定石になっています。 https://zenn.dev/kibe/articles/659dadd1d6426c
transform: translateZ(0)
またアニメーション終了時にtransformのパラメータを保持するようにしておかないと終了時にGPUレイヤーが削除されてしまうためアニメーションの実装についてもやや変更してあります。
Overview
デザインに関する修正を行いました。 見た目の変更というより、iOS対応のための処理方法の変更が中心です。
Description
島未登録時のトップページの表示変更 (fixed #127)
島が登録されていないとき空白が表示されたりしてデザインがあまりよくなかったため、修正を行いました。
ランキングのデザイン修正 (fixed #123)
ランキングのデザイン修正を行いました。
億円の表記がlg:で縦書きになってしまい、それに引っ張られて値がずれる問題の修正
md:max-lg:の時、「資源」のセクションの右側にborderが表示されずバランスが悪くなっていたため修正
LogViewerのデザイン修正
島編集・閲覧画面のデザイン変更
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が消えることもあるようですが、普通に書いてある
対策として
transform: translateZ(0)
を指定することによりGPUレイヤーの作成を促すのが定石になっています。 https://zenn.dev/kibe/articles/659dadd1d6426cまたアニメーション終了時にtransformのパラメータを保持するようにしておかないと終了時にGPUレイヤーが削除されてしまうためアニメーションの実装についてもやや変更してあります。