Safari では、transform-style:preserve-3d を使用した div 内の要素の CSS ホバー スタイルが機能しない
P粉346326040
2023-08-30 18:33:26
<p>ホバー スタイルを使用して、内部にいくつかのソーシャル アイコンを備えた視差スクロール ヘッダーを実装しました。現在、ホバー スタイルは Safari では機能しません。コンテナ上の <code>transform-style:preserve-3d</code> を削除すると、ホバー スタイルは機能します (ただし、視差は壊れます)。 Chromeでは問題なく動作します。 </p>
<p>
<pre class="brush:html;toolbar:false;"><!doctype html>
<html class="h-full">
<頭>
<スクリプト src="https://cdn.tailwindcss.com/3.3.1"></script>
</head>
<div class="h-screen">
<div class="flex h-full flex-col overflow-hidden overflow-y-auto bg-stone-900">
<div class="scrollbar-thin スクロールバー-thumb-orange-400 スクロールバー-トラック-なし スクロールバー-thumb-rounded-full w-full flex-1 overflow-x-hidden overflow-y-hidden overflow-y-scroll スクロール-smooth bg-stone-900" style="perspective: 10px">
<div class="relative flex h-full items-center justify-center" style="transform-style:preserve-3d">
<div class="container m-1 lg:w-3/4" style="transform: translationZ(-5px)scale(1.5)">
<h2 class="font-bungee-hairline inline bg-stone-900 box-decoration-clone p-4 text-3xl font-bold leading-normal text-white hover:bg-red-800 sm:text-4xl md :text-6xl md:leading-tight">旅行 &<br />風景<br />写真</h2>
<div class="mt-4 flex w-min bg-stone-900 px-6 py-4">
<a :href="links.unsplash" aria-label="Unsplash" target="_blank"
><svg class="mr-4 h-6 w-6 塗りつぶし白トランジション hover:cursor-pointer hover:fill-orange-400" xmlns="http://www.w3.org/2000/svg " viewBox="0 0 448 512">
<パス d="M448,230.17V480H0V230.17H141.13V355.09H306.87V230.17ZM306.87,32H141.13V156.91H306.87Z" /></svg
></a>
</div>
</div>
<img class="absolute z-[-1] h-full w-full object-cover" src="https://images.unsplash.com/photo-1661173357770-619fcd1388af?ixlib=rb-4.0.3& ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2340&q=80" alt="トルコの夕暮れ時に鏡のように反射する巨大な塩湖" style="transform: translationZ(-20px)scale(3) " />
</div>
</div>
</div>
</div></pre>
</p>
<p>タイトルの下のスプラッシュ解除アイコンには、ホバー スタイル (オレンジ色とカーソル) が必要です。 </p>
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
「transform-style:preserve-3d」を使用すると、要素の z-index -1 が作成され、項目を選択できなくなり、Safari でマウスをホバーできなくなります。 。
Safari SVG レンダリング メカニズムはまったく異なる動作をするため、複雑な HTML-CSS 構造は避けるべきです。
実際には、HTML 構造は十分に確立されていないため、最初に健全な基盤が確立されていれば、問題も作業もはるかに少なくなります。
HTML-CSS は不健全に見えると思います。
よりシンプルで必須の構造の例を作成しました。
しかし、下にスクロールすると画像が移動するようにしたいと思います。これが必要な場合は、JS を追加できます。必要に応じて指定できます。
https://codepen.io/sawcrow/pen/jOeeEXM
リーリー