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

user_2210364 0
Viewed 543

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.

svg css html
1 Answers

I just ran into the same issue and was able to work around it by adding an extra wrapper div to the element that is being clipped and moving the padding into a child. It's not truly a fix, but allowed me to move forward.

HTML:

<!-- Container -->
<div class="parent">
  <div class="child">

  </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:

.parent {
  -webkit-clip-path: url(#clip);
  clip-path: url(#clip);
}

.child {
  background-color: gray;
  min-height: 300px;
  padding: 100px 0;
}

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

See example here: https://codepen.io/mprquinn/pen/8b1e4e6004e989491f294a8899a94ec7

Hopefully this is helpful!

user_17726910
Related