CSS-путь клипа на мобильном Safari действует как блок контента - PullRequest
0 голосов
/ 14 января 2019

У меня есть контейнер, который вырезан с помощью clip-path и имеет некоторый цвет фона. Отлично работает в любом браузере, который поддерживает clip-path, но в мобильном Safari (вероятно, настольный Safari тоже не может тестировать).

https://codepen.io/Deka87/pen/PXVNgQ

HTML:

<!-- Container -->
<div></div>

<!-- Clip -->
<svg>
  <defs>
    <clipPath id="clip" clipPathUnits="objectBoundingBox">
      <path d="M 0 0 V 1 A 5 5 0 0 1 1 1 V 0 Z"></path>
    </clipPath>
  </defs>
</svg>

CSS:

div {
  min-height: 300px;
  background-color: gray;
  padding: 100px 0;
  -webkit-clip-path: url(#clip);
  clip-path: url(#clip);
}

svg {
  width: 0;
  height: 0;
  position: absolute;
}

Проблема в Safari заключается в том, что при применении clip-path фон контейнера действует так, как будто для его свойства background-clip установлено значение content-box, т. Е. Он не идет за отступами, поэтому эти области остаются пустыми.

Буду признателен за любую помощь.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...