Safari에서 변환 스타일:preserve-3d가 작동하지 않는 div 내부 요소의 CSS 호버 스타일
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">
<머리>
<script src="https://cdn.tailwindcss.com/3.3.1"></script>
</머리>
<div class="h-스크린">
<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 오버플로-x-hidden 오버플로-y-hidden 오버플로-y-스크롤 스크롤 -smooth bg-stone-900" style="perspective: 10px">
<div class="relative flex h-full items-center justify-center" style="transform-style: presents-3d">
<div class="container m-1 lg:w-3/4" style="transform:transformZ(-5px) scale(1.5)">
<h2 class="font-bungee-hairline 인라인 bg-stone-900 상자 장식-clone p-4 text-3xl 글꼴-굵게 선도-일반 텍스트-흰색 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:transformZ(-20px) scale(3) " />
</div>
</div>
</div>
</div></pre>
</p>
<p>제목 아래의 unsplash 아이콘에는 마우스 오버 스타일(주황색 및 커서)이 있어야 합니다. </p>
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
요소 z-index -1을 만드는 "transform-style:preserve-3d"를 사용하면 항목을 선택하고 Safari에서 마우스를 가져갈 수 없기 때문입니다.
Safari SVG 렌더링 메커니즘은 매우 다르게 작동하므로 복잡한 HTML-CSS 구조는 피해야 합니다.
사실 HTML 구조는 잘 정립되어 있지 않으며, 먼저 건강한 기반을 구축하면 문제도 훨씬 적고 작업도 훨씬 줄어듭니다.
제 생각엔 HTML-css가 건강에 좋지 않은 것 같아요.
더 간단하고 꼭 필요한 구조의 예를 만들어봤습니다.
하지만 아래로 스크롤할 때 이미지가 움직이기를 원하는 것 같아요. 이것을 원한다면 JS를 추가할 수 있습니다. 필요한 경우 지정할 수 있습니다.
https://codepen.io/sawacrow/pen/jOeeEXM
으아악