recherche

Maison  >  Questions et réponses  >  le corps du texte

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>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粉346326040P粉346326040459 Il y a quelques jours494

répondre à tous(1)je répondrai

  • P粉322918729

    P粉3229187292023-08-31 14:06:39

    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>

    répondre
    0
  • Annulerrépondre