Why is this happening with the icon in hero section on Safari? I am also noticing that has completely different behaviour for animaitions as well.
Here is my site Read-Only: https://preview.webflow.com/preview/contractbook?utm_medium=preview_link&utm_source=designer&utm_content=contractbook&preview=eaf9a1a22e909045974f147943f19800&pageId=5fbe189e1d733ee7af77a141&mode=preview
(how to share your site Read-Only link)
We inspected this a bit and found that the issue might be with the image you are using. We adjusted it a bit and after putting it in through inspect element it seems to be working. You can download it from this link and use it:
As for the animation could you be more specific as to which animation does not work as expected, we can’t pinpoint the issue.
Webflow Experts at Flow Ninja Support Team!
Thank you Urose!
As for the ilustration, Could you provide the feedback that I can forward to my designers to keep an eye on next time?
As for the animations, there are shifts with z-index, you can notice the switch, and it is completely different to the way it doing in Chrome.
Glad to be of help!
The svg wasn’t properly grouped, you can import the svg I sent you into any design program and see the difference.
For the animations we think iit might be due to elements being relativee rather than absolute. With your layour divs that wrap hand images are set to relative and for some reason they say they are relative to themselves instead of to “c-partnership-hero-imaged” so my best guess would be to make divs that wrap hands absolute iinstead of relative and position them the way you want. After that it will probably take some testing but I think that might be the solution.
I downloaded and imported the one you sent and still not good…
i put them in absolute now and still not helpful. Safari has layer preview and that is what i expected that is going on but i am not sure how to manipulate z