スクロール シャドウ? 純粋なCSSパララックス? ゲームバックオン。 PlatoBlockchain データ インテリジェンス。 垂直検索。 あい。

スクロールシャドウ? 純粋なCSS視差? ゲームバックオン。

Chris Ho (クリス・ホー) 呼び出し 影をスクロールする 彼のお気に入りのCSSのXNUMXつ-これまでのトリック。 Lea Verou 普及した いくつかの巧妙なXNUMXつのレイヤードバックグラウンドグラデーションを使用した純粋なCSSアプローチ background-attachment マジック。 その結果、スクロール可能なコンテナで追加のコンテンツが利用可能であるというヒントをユーザーに提供する、滑らかなスクロール操作が実現します。

ただXNUMXつの問題:それ 壊れました Safari iOS13で。ある日、それはすべて良かった。 次は、それほど多くはありません。 影響を受けたのはそれだけではありません。 キースクラークのCSSのみの視差効果 また、その頃に動作を停止しました。

さて、読者 ロナルドは書いた すべてが再び機能していると言うこと! 実際、私は今これをiPad(Safari 15.5)で書いていますが、Chrisのデモは相変わらずシャープに見えます。 キースもそうです オリジナルデモ.

それで、何がそれを壊したのですか? まだわかりません。 しかし Safari13リリースノート 手がかりを提供する:

  • すべてのフレームにXNUMX本指の高速スクロールのサポートが追加されました。 overflow:scroll する必要性を排除する要素 set-webkit-overflow-scrolling: touch.
  • 水平スクロールを必要とするレスポンシブメタタグを含むワイドウェブページのiPadでのデフォルトの動作を変更しました。 ページは水平スクロールを防ぐために拡大縮小され、テキストは読みやすさを維持するためにサイズ変更されます。

いつ修正され、何が修正されましたか? さて、スクロールシャドウ側では、Safari 15.4 含まれました いくつかの作業 background-attachment: local それはトリックをしたかもしれません。 視差側では、Safari 14.1 追加されました 個々の変換プロパティのサポート…多分それ?

タイムスタンプ:

より多くの CSSトリック