Problem with 3D Transform in Safari


I have a problem with my website, actually with a page Portfolio which displays correctly in Chrome on all devices, but it does’t work in Safari.

On page Chrome I have a rotator interaction and something is not right. It works as preview in Webflow, even if I’m using Safari. But once I publish, it doesn’t work any more on published website.

Thank you!

Here is my site Read-Only: [LINK](Webflow - Pineapple Noir)
(how to share your site Read-Only link)

Anyone? Please help.

hi @llanaa IMO your issue is related to transform-style as when I have checked your live page Portfolio | Pineapple Noir and toggle transform-style in devTools image showed and animation worked. You may need -webkit prefix in custom code to make it work in Safari but I didn’t checked what custom code you have already. Look on internet to get more opinions how to solve it.

Thank you @Stan it might be, i’ll see if I can figure it out.
But it also might be something with the Transform Z axis and perspective.

hi @llanaa as I have mentioned search internet for possible solution what need to have -webkit prefix as for me it will be very hard to fix it as I have no options to save and publish changes but IMO it can be easy fix.

the transform-style is in technical preview in Safari 16.6 so -webkit will be needed. you can also check other properties on caniuse for compatibility.

you can also use @support if you want :person_shrugging:

Hi @Stan Thank you so much. This doesn’t work for me. Maybe you can check with Inspect? I can give you url