1

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).

Aydin Hassan
  • 1,465
  • 2
  • 20
  • 41
  • 1
    Please note that [providing a link to your site is not sufficient](https://meta.stackoverflow.com/q/254428). – InSync May 11 '23 at 21:24
  • @InSync got it thanks. Trying to create a environment with a small reproducer now. – Aydin Hassan May 11 '23 at 21:33
  • I'm using Safari 16.3 on Ventura 13.2.1 and the orange fill on hover is working just fine. Can you tell us your safari version? And also if it's mobile or desktop, or even both? – Alex Berger May 15 '23 at 09:08
  • @AlexBerger I'm using Safari 16.4 on Ventura 13.13.1 (Desktop). I also tried on iPhone latest version and the links can't be clicked, I guess it must be something with the z index or perspective. – Aydin Hassan May 15 '23 at 12:57
  • By adding the `style="backface-visibility: hidden;"` inline style to the social icons, you should be able to fix the hover styles not working issue in Safari while preserving the parallax scrolling effect. – Xaib Aslam May 16 '23 at 16:50
  • @XaibAslam did you actually try or did you copy from ChatGPT? – Aydin Hassan May 17 '23 at 11:44

2 Answers2

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>
sawacrow
  • 166
  • 9
  • Thanks I appreciate the help and explanation. I would like the existing parallax behaviour preserved though. I'd rather not use JavaScript for that since the parallax with CSS is working fine. I'd prefer to find a solution for the links. – Aydin Hassan May 18 '23 at 10:22
-1

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

Sandy M
  • 138
  • 7