CSS 懸停樣式位於 div 內的元素上，且帶有 transform-style:preserve-3d 在 Safari 中不起作用
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">
<head>
<script 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 scrollbar-thumb-orange-400 scrollbar-track-none scrollbar-thumb-rounded-full w-full flex-1 overflow-x-hidden overflow-y-hidden overflow-y-scroll 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: translateZ(-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">Travel &<br />Landscape<br />Photography</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 fill-white transition hover:cursor-pointer hover:fill-orange-400" xmlns="http://www.w3.org/2000/svg " viewBox="0 0 448 512">
<path d="M448,230.17V480H0V230.17H141.13V355.09H306.87V230.17ZM306.87,32H141.13V156.91H306.87Z/gt;
></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="A Ginormous salt lake lectlecting transkey transplate(plate)) 151175956p 20 月) 10p) 159299592929 身))505%) 外形： scale(3) " />
</div>
</div>
</div>
</div></pre>
</p>
<p>標題下方的 unsplash 圖示應該會有一些懸停樣式（橘色和遊標）。 </p>
因為當您使用「transform-style:preserve-3d」時，會使元素 z-index -1，那麼您將無法選擇項目，也無法將滑鼠懸停在 Safari 上。
Safari SVG 渲染機制的工作方式非常不同，因此應避免複雜的 HTML-CSS 結構。
事實上，HTML結構並沒有建立得很好，如果先建立一個健康的基礎，問題就會少很多，工作量也會少很多。
我認為 HTML-css 看起來不太健康。
我製作了一個更簡單且必須具備的結構的範例。
但我猜您希望圖像在向下滾動時移動。如果你想要這個，可以加JS。如果需要，您可以指定它。
https://codepen.io/sawacrow/pen/jOeeEXM
#<!doctype html> <html class="h-full"> <head><script src="https://cdn.tailwindcss.com/3.3.1"></script> </head><div class="h-screen bg-parallaxer"> <div class="flex h-full flex-col overflow-hidden overflow-y-auto bg-stone-900-disable"> <div class=" w-full flex-1 bg-stone-900-disable" style="perspective: 10px"> <div class="relative flex h-full items-center justify-center" > <div class="container m-1 lg:w-3/4" style=""> <h2 class="font-bungee-hairline inline bg-stone-900-disable 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">Travel &<br />Landscape<br />Photography</h2> <div class="mt-4 flex w-min bg-stone-900-disable px-6 py-4"> <a :href="links.unsplash" aria-label="Unsplash" target="_blank"> <svg class="mr-4 h-6 w-6 fill-white transition hover:cursor-pointer hover:fill-orange-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M448,230.17V480H0V230.17H141.13V355.09H306.87V230.17ZM306.87,32H141.13V156.91H306.87Z" /></svg></a></div></div> </div> </div> </div> </div> <style>.bg-parallaxer {/* The image used */background-image: url("https://images.unsplash.com/photo-1661173357770-619fcd1388af?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2340&q=80");background-attachment: fixed;background-position: center;background-repeat: no-repeat;background-size: cover;min-height: 2000px;}</style>