Getting weird rendering issues on Safari

[johnend]

Hello!

Love the library, works great in Chrome but there is some weird flickering behaviour going on in Safari for some reason. Not 100% why this should be the case, but thought it would be good to let you know.

Website is www.johnenderby.com vanilla-tilt is used on the homepage's middle section.

Would be good to know why it isn't working!

[bastilimbach]

It definitely has to do with the way webkit renders 3D CSS transformations. Take a look at -webkit-backface-visibility: hidden;.
The project demo site works perfectly in Safari.

[micku7zu]

Sorry guys, can't help. I don't have any Apple device 😞

[johnend]

@bastilimbach I tried setting that property but it didn't work, also tried changing a bunch of others, changing the implementation of vanilla-tilt and removing it from my browserify bundle, and everything works fine in Chrome but not in Safari. Seems weird but everything just flickers out of view when mousing over. Are you seeing the same on my site?

[jonahgoldwastaken]

@johnend I had the same issue on my website, and found out a javascript library I use called ParticlesJS inserts a canvas element which interferes with the 3d transform effect. The only guess I can make is that Safari puts the canvas element and the tilted element on the same point on the z-axis. @micku7zu I don't know how helpful this information is, but maybe you can figure something out. 😬

[johnend]

I actually found a solution to this on Safari - though it isn't ideal. For the items that were clipping if I added a transform: translateZ to them in their CSS rules the wouldn't clip, unfortunately this means using this rule on anything the should be placed on top of these elements. Not ideal, but works for now.

[nathangc]

I'm sure it's horrible and buggy but I've found that adding transform: translateZ(-100px); to the canvas element stops my tilt elements from going weird on Safari.

[HFSVBC]

Hi, I'm having a similar issue with safari. I'm applying the library on a bootstraps thumbnail element and when I hover the element the effect is applied correctly to that part but the onsite sides of the element disappear.
If it helps here is my code:

<div class="row">
	<div class="col-md-4 col-sm-6 col-xs-12 TCT-articlePreview">
		<div class="thumbnail" data-tilt data-tilt-perspective="1000" data-tilt-scale="1" data-tilt-speed="400" data-tilt-max="10" data-tilt-axis="y">
			<img src="<image here>" alt="imagem de apresentação do artigo " title="imagem de apresentação do artigo ">
			<div class="caption">
      				<h3>Thumbnail label</h3>
      				<p>Some text...</p>
      				<p><a href="#" class="btn btn-default" role="button">Button</a></p>
 			</div>
		</div>
	</div>
</div>

Help please

[micku7zu]

Please provide an online demo and I will help you

[thdatnguyen]

@nathangc you save my day.
Thanks!

[VanDerLars]

Guys, you should point that out on the readme-page. Took me hours to investigate this bug 🙈

In my case the bug occurs when I have a div with a background-image behind the tilted div.

I'm glad I finally had the glorious idea of looking into the solved issues 😆

[micku7zu]

@VanDerLars Done, added this on the Readme page 😄

[VanDerLars]

Super @micku7zu :)

btw. the bug still exists on safari, if two tilted div lay over each other and the underlying tilted div has an image or a background-image.

you can investigate this here:
https://8bit-world.com/

just open the menu and fiddle around.

[dbartelmus]

Can confirm that this bug exist, despite different demos and codes which tried to fix it.
Good news is that new Safari in Technology Preview works just fine (as for today).

[GunnarPDX]

I had this issue and finally figured out what was going wrong. I was using a grainy image background on my webpage behind the tilt element and by adding -webkit-transform-style: preserve-3d; to that background class I was able to get rid of the issue completely on safari.

I have run into similar issues with a .js flip plugin on chrome and It had to do with preserve-3d as well, seems to be a common issue when images can intersect or are covered during transformations. If anyone else runs into this issue I would recommend experimenting with preserve-3d, make sure it's applied to all elements with images being transformed and images behind those aswell.

[mariakhn]

Nothing worked for me. I just added overflow:hidden to main parent element and it worked like a charm in Safari.
Screenshot of code: http://prntscr.com/xd29zs

[estebancasas9817]

You just need to add this properties:
will-change: transform;
transform: perspective(500px) rotateX(0deg) rotateY(0deg) scale3d(1, 1, 1);

[qingjiaowoxiaoyi]

我是给son1添加vanilla-tilt.js后发现问题，你可以尝试使用将overflow:hidden加入到grandfather1

<body>
  <div class="main">
    <div class='grandfather1'>
      <div class='father1'>
        <div class='son1'></div>
      </div>
    </div>
     <div class='grandfather2'>
      <div class='father2'>
        <div class='son2'></div>
      </div>
    </div>
  </div>
</body>