Safari Browser issue

[hasanji1011]

Hi, I was trying this plugin for designing a card block but i encounter a problem on mac safari, on following link, i created a demo to show the issue, when we hover on it, it overlaps and gave a cut on the image

https://codepen.io/hasanji/pen/bYdXwX

can you please help me with this issue ?

[gijsroge]

This is a bug, i'm just not sure yet if this is just a rendering issue with safari or if its something I can fix.

[cabrailsford]

Hey guys, not sure if this is related (and apologies if not), but I'm also having an issue only in Safari. If you visit http://musicwater.com in Safari and hover the top slider section, the tilt background-image completely disappears, although the text remains. It should have a cutout and text above the main slide background, but the cutout vanishes on hover.

[hasanji1011]

@cabrailsford yeah, this is same as mine. I tried to manage it with -webkit- hacks but it didn't resolve :(

[tyler-insight]

I have encountered a similar issue where the image is getting cut and whatever is below the image is flooding above. I found that if I put a transform: translateZ(-100px); on the elements that are below my title element they won't cut the image anymore. Hope this helps.

https://codepen.io/IamBramer/pen/GOLOMY

[IamBramer]

After doing some testing, I found that even though adding the transform: translateZ(-100px); to the elements under my tilt element, its causes weird white glitching to then happen on Chrome. So instead of applying it in CSS, I've added the following code to a JS file (shadow-image is a shadow I have UNDER and OUTSIDE of my tilt element):

if (navigator.userAgent.indexOf('Safari') != -1 && navigator.userAgent.indexOf('Chrome') == -1) {
     $(".shadow-image").css('transform','translateZ(-100px)');
}

This only targets the Safari browser. Another thing I've done is properly z-index all the items according to their level. So my tilt element is at z-index: 1 and any elements inside of it I've set to z-index: 2 or higher, while any elements below my tilt element I've set to z-index: -1. I hope this helps.

[mtonc]

The above fixeds were not working for me. I am using this with the Essential Grid Wordpress plugin. In my case there were lielements containg the elements that had the tilt called on them. If I set their backgrounds-color to transparent, that did the trick for me.

[imsys]

For anyone who stumble on this same problem, adding -webkit-transform: translateZ(0); to the element under it fixes the problem in Safari, for my cases.

[Vlasin98]

-webkit-transform: translateZ(0)

This worked. Just make sure is added to the parent element of what will be tilted.