Safari

[charlie3k]

I have issues with Safari. I have tried all the workarounds in the other threads and none of them are able to solve my problem. Is there any way to disable tilt.js on Safari and just have static images? An example of this is here if you view on both Chrome and Safari. He has exactly what I'm trying to do I just can't figure out how.

This is what a tilted element looks like on safari for me.

* I do not know javascript very well ( I'm working on it :) )

[micku7zu]

I'm sorry but can't help with debug on Safari, I don't have any Safari around.

[BrandonOldenhof]

I have the same problem on the website I'm working on. @micku7zu you could have a look into BrowserStack or LambdaTest. They're both free for open-source projects like this library.

[BrandonOldenhof]

I have the same problem on the website I'm working on. @micku7zu you could have a look into BrowserStack or LambdaTest. They're both free for open-source projects like this library.

@micku7zu just a quick reminder that this issue is still open and that there's a free way to review visual bugs in Safari

[micku7zu]

I've loaded both https://www.anandupender.com/ and https://micku7zu.github.io/vanilla-tilt.js/ on BrowserStack and LambdaTest on Safari and didn't see any issue.

How to reproduce it?

[BrandonOldenhof]

I'm not sure if @charlie3k is going to reply so I'll just hijack his subject.

In my case I'm using tilt on https://sovib.thiscould.be/. You can use the following site password: 11idEgFR9MfO0DV0. Don't worry, the site password is mainly there to make sure Google doesn't visit the website and index it.

Tilt is used in the "blog" section on the page, and on the https://sovib.thiscould.be/verzekeringen page. If you hover over the first card in the everything looks fine:

If you then hover over the second card you can see that the tilt shape overlays the content in the card, making it completely unreadable:

I used Safari 14 & MacOS Big Sur, but it happens in Catalina as well.

[micku7zu]

After a small investigation, it looks like this is a bug in Safari: https://stackoverflow.com/questions/18146511/bug-in-css3-rotatey-transition-on-safari/18167565

There are also some solutions on StackOverflow for this problem, one based on z-index and one using -webkit-transform: translateZ(1000px);.

.card .card-inner {
  -webkit-transform: translateZ(1000px);
}

I couldn't make z-index work, but I didn't played too much because the emulators are bad and hard to debug with, but the translateZ solution works.

[BrandonOldenhof]

You, sir, are my hero of the day. The fix works perfectly! Thank you for taking the time to research the solution.

[palmsout]

I'm encountering the z-axis bug on safari, incl. all iOS browsers, and I've tried the fixes that are offered on this and other threads:

I've tried adding -webkit-transform: translateZ(1000px); to the elements meant to be above the tilting image, and I've tried -webkit-transform: translateZ(-1000px); on the tilting element itself. No luck with either. I've also tried giving those classes low z-index values, but my understanding is that z-index values go out the window when safari starts tilting.

At this point, I'd be ok with just disabling vanilla tilt altogether when viewed on mobile or using safari. There was a reply about how disable on mobile on another raised issue here but it was cryptic, and I'm no expert at this stuff, so I don't understand what was done to disable on mobile.

Does anyone have suggestions for how to fix the clipping problem that's occurring on safari here: http://palmsout.net -- when using the overlay navigation? (if viewing on safari desktop, reduce the size of the screen until you can access the hamburger and click it).

I'm ripping my hair out trying to figure out why the translateZ solution isn't working for me when it's seemed to work for others.

[micku7zu]

It looks like the translateZ solution works on your case also: https://i.imgur.com/MJX1qwT.png

I don't have any Apple product so I don't have a real device to test, I used the browserstack emulator.

[palmsout]

Thanks @micku7zu -- I hadn't thought to add the translateZ directly inline, I was doing so through a custom class. The custom class wasn't doing anything to solve the problem, but after adding it inline to the figure, it works! Thanks so much for doing the test.