Здесь и на фидле (https://jsfiddle.net/a2x4ps5c/) кажется не работает, но чистый html документ в сафари дает примерно такой результат при hover с трансформацией (тень обрезается). Как это пофиксить? Как это пофиксили фидл?
.test {
width: 192px;
height: 137px;
background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg width='193px' height='137px' viewBox='0 0 193 137' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Ctitle%3EPath 21%3C/title%3E%3Cg id='page' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cpath d='M192.075294,24.889009 C180.075294,69 158.111715,132 121.111715,136 C84.1117148,140 85.1117148,117 41.1117148,114 C-2.88828517,111 -9.88828517,76 12.1117148,48 C34.1117148,20 75.0752935,0 155.075294,0 L192.075294,24.889009 Z' id='Path-21' fill='%23F4F0E2'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
background-repeat: no-repeat;
-webkit-filter: drop-shadow( 0px 0px 15px #ADADAD);
filter: drop-shadow( 0px 0px 15px #ADADAD);
transition: all 0.25s ease;
}
.test:hover {
transform: skew(0deg, 10deg);
}
<div class="test">
</div>