Make it easier for the browser
I have test it with
ul {
clip: rect(0, 999px, 0, 0);
}
and
h3:hover ~ ul, h3:active ~ ul {
clip:rect(0px, 999px, 10rem, 0px);
}
and it works (fiddle), at least in IE11.
Usually browser have problems transitiioning non numeric properties. I agree that a transition from auto to auto should be handled easily, but if not, then revert to numeric values
ul {
clip: rect(0, 999px, 0, 0);
position: absolute;
transition-delay: 0.29s;
transition-property: clip;
transition-duration: 0.5s;
transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
h3:hover~ul,
h3:active~ul {
clip: rect(0px, 999px, 10rem, 0px);
}
<h3>Hover here</h3>
<ul>
<li>This</li>
<li>list</li>
<li>is</li>
<li>clipped.</li>
<li>A clip</li>
<li>transition</li>
<li>will</li>
<li>show it</li>
</ul>