CSS clip-path on mobile Safari acts like content-box

I have a container that is cut with clip-path and has some background color. Works perfectly in every browser that supports clip-path but mobile Safari (probably desktop Safari too, can't test).

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;
}

The problem in Safari is that when clip-path is applied the background of the container acts like its background-clip property is set to content-box i.e. it doesn't go behind the padding's so those areas remain blank.

Any help would be appreciated.