Gaya tuding CSS pada elemen di dalam div dengan transform-style:preserve-3d tidak berfungsi dalam Safari
P粉346326040
2023-08-30 18:33:26
<p>Saya melaksanakan pengepala tatal paralaks dengan beberapa ikon sosial di dalamnya dengan gaya tuding. Gaya tuding pada masa ini tidak berfungsi dalam Safari. Apabila saya mengalih keluar <code>transform-style:preserve-3d</code> Ia berfungsi dengan baik dalam Chrome. </p>
<p>
<pre class="brush:html;toolbar:false;"><!doctype html>
<html class="h-full">
<kepala>
<skrip 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-oren-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="perspektif: 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">Perjalanan &<br />Lanskap<br />Fotografi</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-oren-400" xmlns="http://www.w3.org/2000/svg " viewBox="0 0 448 512">
<laluan d="M448,230.17V480H0V230.17H141.13V355.09H306.87V230.17ZM306.87,32H141.13V156.91H306.87Z" //gsv;
></a>
</div>
</div>
<img class="z mutlak-[-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="Tasik garam Ginormous yang memantul seperti cermin di Turki pada waktu matahari terbenam" style="transform: transpxlate" style="transform: transpxlate" " />
</div>
</div>
</div>
</div></pra>
</p>
<p>Ikon nyah percikan di bawah tajuk harus mempunyai gaya tuding (oren dan kursor). </p>
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Oleh kerana apabila anda menggunakan "transform-style:preserve-3d", yang menjadikan elemen z-index -1, maka anda tidak akan dapat memilih item dan menuding pada Safari.
Mekanisme pemaparan Safari SVG berfungsi dengan sangat berbeza, jadi struktur HTML-CSS yang kompleks harus dielakkan.
Sebenarnya, struktur HTML tidak mantap, dan jika anda membina asas yang sihat terlebih dahulu, anda akan menghadapi masalah yang jauh lebih sedikit dan lebih sedikit kerja.
Saya rasa HTML-css kelihatan tidak sihat.
Saya buat contoh struktur yang lebih ringkas dan mesti ada.
Tetapi saya rasa anda mahu imej itu bergerak semasa anda menatal ke bawah. Jika anda mahu ini, anda boleh menambah JS. Anda boleh menentukannya jika perlu.
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>