欧美一区二区三区,国内熟女精品熟女A片视频小说,日本av网,小鲜肉男男GAY做受XXX网站

帶有transform-style:preserve-3d的div中的元素上的CSS懸停樣式在Safari中不起作用

CSS
黃文隆1年前8瀏覽0評論

我實現了一個視差滾動標題，它里面有一些懸停樣式的社交圖標。懸停樣式目前在Safar i中不起作用。當我移除容器上的transform-style:preserve-3d時，懸停樣式起作用(但會破壞視差)。它在Chrome上運行良好。

<!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" /></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="A Ginormous salt lake reflecting like a mirror in Turkey at sunset" style="transform: translateZ(-20px) scale(3)" />
      </div>
    </div>
  </div>
</div>

因為當你用& quot變換樣式:保留3d & quot這使得元素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>

請注意，根據網上許多論壇中的一個，視差效應在蘋果設備上不起作用。所以你必須找到一份工作來處理它。偶然發現這個問題的其他人，如果你正在使用react或nextjs，這里有可以使用的npm包。

蘋果的視差問題

蘋果視差問題

translateZ的IOS問題

反應-滾動-視差