0

Здесь и на фидле (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>

1 ответ 1

2

Сделать размер блока больше и размещение фонового изображения в центр чтобы другие блоки или край документа не мешали рисовать тень. Для наглядности разницы добавил второй блок и границу

.test {
  border: dotted 1px grey;
  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);
}

.bigger {
  background-position: 15px 15px;
  width: 222px;
  height: 167px;
}
<div class="test">
</div>
<div class="test bigger">
</div>

4
  • Мне нравится, хотя все еще не понимаю почему фидл ничего не обрезает. Ну или все-таки обрезает, но только иногда
    – Jenya
    10 мая 2020 в 17:51
  • здесь видно как левый и верхний края обрезаются краем документа потому что белый фон а там чёрный, скорее всего поэтому не заметно
    – IvaMuxa
    10 мая 2020 в 18:06
  • Но сафари-то снизу и справа тоже обрезает
    – Jenya
    10 мая 2020 в 18:39
  • 1
    снизу и справа тоже есть край документа и он может вполне себе совпасть с краем блока а не обязательно проходить по краю экрана, всё зависит от того как браузер формирует края как раз
    – IvaMuxa
    10 мая 2020 в 18:46

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.