3D Transformation Ignoring Clip Path
<p>I have a parent <code>div#clipper</code> with a <code>clip-path</code>, which clips a child <code>div#object</code>. When I apply a 3D transformation to <code>#object</code>, no matter the values, the element stops obeying the clip and shows as if no clip was applied.</p>

<p><a href="https://jsfiddle.net/pzsLm42z/" rel="nofollow noreferrer">Here's a demonstration.</a></p>

<p>HTML:</p>

<pre><code>&lt;div id="clipper"&gt;
  &lt;div id="object"&gt;&lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>CSS:</p>

<pre><code>body {
  margin: 0;
}

#clipper, #object {
  width: 200px;
  height: 200px;
}

#clipper {
  clip-path: inset(30px);
}

#object {
  transform: translate3d(1px, 1px, 1px);
  background-color: #3FA;
}
</code></pre>

<p>This appears to happen in both Chrome and Firefox. Is there a documented reason why? How can I prevent it?</p>