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

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

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