Safari では、transform-style:preserve-3d を使用した div 内の要素の CSS ホバー スタイルが機能しない
<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>
