简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Le style de survol CSS sur l'élément à l'intérieur de div avec transform-style:preserve-3d ne fonctionne pas dans Safari
P粉346326040
P粉346326040 2023-08-30 18:33:26
0
1
422
<p>J'ai implémenté un en-tête de défilement parallaxe avec des icônes sociales à l'intérieur avec des styles de survol. Les styles de survol ne fonctionnent actuellement pas dans Safari. Lorsque je supprime <code>transform-style:preserve-3d</code> sur le conteneur, le style de survol fonctionne (mais interrompt la parallaxe). Cela fonctionne bien dans Chrome. </p> <p> <pre class="brush:html;toolbar:false;"><!doctype html> <html class="h-full"> <tête> <script src="https://cdn.tailwindcss.com/3.3.1"></script> ≪/tête> <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 -lisse bg-stone-900" style="perspective : 10px"> <div class="relative flex h-full items-center justification-center" style="transform-style:preserve-3d"> <div class="conteneur m-1 lg:w-3/4" style="transform: translationZ(-5px) scale(1.5)"> <h2 class="font-bungee-hairline en ligne bg-stone-900 box-decoration-clone p-4 text-3xl police-bold interligne-texte normal-blanc survol :bg-red-800 sm:text-4xl md :text-6xl md:leading-tight">Voyage &<br />Paysage<br />Photographie</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"> <chemin 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="Un immense lac salé se reflétant comme un miroir en Turquie au coucher du soleil" style="transform: translateZ(-20px) scale(3) " /> </div> </div> </div> </div></pré> </p> <p>L'icône Unsplash sous le titre doit avoir un style de survol (orange et curseur). </p>
P粉346326040
P粉346326040

répondre à tous(1)
P粉322918729
P粉3229187292023-08-31 14:06:39 1 plancher

Parce que lorsque vous utilisez "transform-style:preserve-3d", qui rend l'élément z-index -1, vous ne pourrez pas sélectionner d'éléments et survoler Safari.

Le mécanisme de rendu Safari SVG fonctionne très différemment, les structures HTML-CSS complexes doivent donc être évitées.

La vérité est que la structure HTML n'est pas bien établie, et si vous construisez d'abord une base saine, vous aurez beaucoup moins de problèmes et beaucoup moins de travail.

Je pense que HTML-css semble malsain.

J'ai fait un exemple de structure plus simple et incontournable.

Mais je suppose que vous voulez que l'image bouge lorsque vous faites défiler vers le bas. Si vous le souhaitez, vous pouvez ajouter JS. Vous pouvez le préciser si nécessaire.

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>
Comme +0
Ajouter une réponse
Sujets populaires
Plus>
Articles populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois：Formation PHP en ligne sur le bien-être public，Aidez les apprenants PHP à grandir rapidement！