Question 170876 in CSS Question posted in
Some basic documentation can be found here.

Why isn’t CSS Hover styles on an element inside a div with transform-style:preserve-3d working in Safari?

I implemented a parallax scrolling header and it has some social icons inside with hover styles on. The hover styles are not currently working in Safari. When I remove the transform-style:preserve-3d on the container the hover styles work (but breaks the parallax). It works fine in Chrome as is.

<!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>

The unsplash icon below the heading should have some hover styles on it (orange and cursor).

Tags:

2

Answers


  1. 0

    Because when you use "transform-style:preserve-3d" thats make elements z-index -1 then you cant select item and cant hover on Safari.

    Safari SVG-rendering mechanism works very differently, so complex HTML-CSS structures should be avoided.

    In fact, the HTML structure is not built very well, if a healthy foundation is established first, there will be much less problems and less effort will be needed.

    HTML-css does not look very healthy, I think.

    I made an example of a simpler and must-have structure.

    But I guess you want your image to move as you scroll down. If you want this, JS can be added. You can specify this if you want.

    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>
    Login or Signup to reply.
  2. 0

    Do note that parallax effect is not working in apple devices according to one of the many forums available online. So you have to find a work around to with it. Someone else who stumbled upon this question, if you’re working with react or nextjs, here is the npm package that can be used.

    Parallax Issue in Apple

    Apple Parallax issue

    IOS issue for translateZ

    npm react-scroll-parallax

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search