Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Safari #83

Open
charlie3k opened this issue Apr 27, 2021 · 10 comments
Open

Safari #83

charlie3k opened this issue Apr 27, 2021 · 10 comments

Comments

@charlie3k
Copy link

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.
Screen Shot 2021-04-27 at 11 00 03 AM

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

@micku7zu
Copy link
Owner

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

@BrandonOldenhof
Copy link

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
Copy link

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
Copy link
Owner

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
Copy link

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:
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:
everything explodes

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

Repository owner deleted a comment from SergiuSandorPPB Jul 29, 2021
@micku7zu
Copy link
Owner

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
Copy link

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

@palmsout
Copy link

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
Copy link
Owner

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.

@micku7zu micku7zu reopened this Nov 29, 2021
@palmsout
Copy link

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants