Анимация CSS3 отличается в браузерах Chrome и Safari. ⇐ CSS

[Anonymous]

I am trying to create a 3D hover animation effect for a site and it works just fine in Chrome based browsers, since in the development phase it was written with the help of Chrome's inspect tool, but after trying to test its compatibility in Safari, it creates a hard but still visible after-image effect which I am not sure why it is caused.

.icon { width: 140px; aspect-ratio: 1/1; position: relative; display: flex; justify-content: center; flex-direction: row; transform-style: preserve-3d; -webkit-transform-style: preserve-3d; transform: scale(1, 1); -webkit-transform: scale(1, 1); transition: all 0.2s ease-in-out 0s; -webkit-transition: all 0.2s ease-in-out 0s; top: 140px; .img-wrapper { width: 98px; aspect-ratio: 1/1; position: relative; top: -10px; &:after { content: ''; display: flex; width: 15px; height: 115px; background-color: hsl(12, 77%, 35%); position: absolute; left: 80%; top: 0%; transform-style: preserve-3d; transform: skewY(-30deg) rotateZ(5deg) translateX(11px) translateY(-6px); -webkit-transform-style: preserve-3d; -webkit-transform: skewY(-30deg) rotateZ(5deg) translateX(11px) translateY(-6px); z-index: -1; transition: all ease-in-out 0.2s 0s; -webkit-transition: all 0.2s ease-in-out 0.01s; clip-path: polygon(0 10px, 100% 20px, 90% 95%, 3px 99%) } &:before { content: ''; display: flex; width: 115px; height: 14px; background-color: hsl(12, 77%, 35%); transform: skewX(-20deg) rotateZ(10deg) translateY(-9px) translateX(-6px); transform-style: preserve-3d; -webkit-transform: skewX(-20deg) rotateZ(10deg) translateY(-9px) translateX(-6px); -webkit-transform-style: preserve-3d; clip-path: polygon(11px 0, 96% 2px, 100% 100%, 0 100%); -webkit-clip-path: polygon(11px 0, 96% 2px, 100% 100%, 0 100%); transition: all ease-in-out 0.2s 0s; -webkit-transition: all 0.2s ease-in-out 0s; position: absolute; } .logo-icon { width: 100%; height: 80%; background-color: orange; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; transform: skewY(10deg); -webkit-transform: skewY(10deg); transition: all ease-in-out 0.2s 0s; -webkit-transition: all 0.2s ease-in-out 0s; clip-path: polygon(2px 0, calc(100% - 2px) 0px, 90% 89%, 50% 99%, 0 89%); position: relative; } } &:hover { transform: scale(1.2, 1.2); -webkit-transform: scale(1.2, 1.2); .img-wrapper { &:after { display: flex; width: 0px; height: 70%; left: 80%; top: 0%; transform: skewY(-5deg) rotateZ(5deg) translateX(30px) translateY(-20px); -webkit-transform: skewY(-5deg) rotateZ(5deg) translateX(30px) translateY(-20px); clip-path: polygon(0 8px, 99% 2px, 100% 98%, 0 99.5%); } &:before { width: 100%; height: 0px; transform: translateY(-20px) translateX(20px); -webkit-transform: translateY(-20px) translateX(20px); clip-path: polygon(0 0, 98% 1px, 98% 100%, 2px 100%); -webkit-clip-path: polygon(0 0, 98% 1px, 98% 100%, 2px 100%); } .logo-icon { transform: skewY(0) translateY(-20px) translateX(20px); -webkit-transform: skewY(0) translateY(-20px) translateX(20px); } } } } ```

The codepen for the animation is https://codepen.io/Giannis-Nikolaou/pen/PogwLNa

I have tried adding the -webkit prefix on some properties I hypothesized were the cause of the issue but the problem isn't fixed. I also thought it might be a weird delay issue that Safari has with the :before and :after pseudo-elements, so I've added my own transition-delay, but that doesn't fix it since it causes a clear to see delay.
I have also tried adding the -webkit prefix on the clip-path property but this also does not fix it. I've ran out of ideas to test and see what the problem is.


Источник: https://stackoverflow.com/questions/780 ... ri-browser