У меня есть контейнер, который вырезан с помощью 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
, т. Е. Он не идет за отступами, поэтому эти области остаются пустыми.
Буду признателен за любую помощь.