Safari では、transform-style:preserve-3d を使用した div 内の要素の CSS ホバー スタイルが機能しない-PHP中国語ネットワークQ&A
Safari では、transform-style:preserve-3d を使用した div 内の要素の CSS ホバー スタイルが機能しない
P粉346326040
P粉346326040 2023-08-30 18:33:26
0
1
417

ホバー スタイルを使用して、内部にいくつかのソーシャル アイコンを備えた視差スクロール ヘッダーを実装しました。現在、ホバー スタイルは Safari では機能しません。コンテナ上の transform-style:preserve-3d を削除すると、ホバー スタイルは機能します (ただし、視差は壊れます)。 Chromeでは問題なく動作します。

 
      <頭>
       <スクリプト src="https://cdn.tailwindcss.com/3.3.1"> 

タイトルの下のスプラッシュ解除アイコンには、ホバー スタイル (オレンジ色とカーソル) が必要です。

P粉346326040
P粉346326040

全員に返信 (1)
P粉322918729

「transform-style:preserve-3d」を使用すると、要素の z-index -1 が作成され、項目を選択できなくなり、Safari でマウスをホバーできなくなります。 。

Safari SVG レンダリング メカニズムはまったく異なる動作をするため、複雑な HTML-CSS 構造は避けるべきです。

実際には、HTML 構造は十分に確立されていないため、最初に健全な基盤が確立されていれば、問題も作業もはるかに少なくなります。

HTML-CSS は不健全に見えると思います。

よりシンプルで必須の構造の例を作成しました。

しかし、下にスクロールすると画像が移動するようにしたいと思います。これが必要な場合は、JS を追加できます。必要に応じて指定できます。

https://codepen.io/sawcrow/pen/jOeeEXM

リーリー
いいねを押す+0
    最新のダウンロード
    詳細>
    ウェブエフェクト
    公式サイト
    サイト素材
    フロントエンドテンプレート
    私たちについて 免責事項 Sitemap
    PHP中国語ウェブサイト:福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!