CODEWITHSUNDEEP
cssinternet-explorercss-transitions
dotnetCarpenter
dotnetCarpenter

Reputation: 11331

Transition clip:rect in IE doesn't animate - is it a bug and is there a work around?

I've made menu that relies on transitioning the clip property. It works great in all browsers but IE. This jsfiddle illustrates my use-case: http://jsfiddle.net/dotnetCarpenter/WTL2r/ I expect this to work from IE10, but testing with IE11 shows that it just jumps between the two states.

Basically I got a list which is hidden by clip: rect(auto, auto, 0, auto); and shown with clip: rect(auto, auto, 10rem, auto);.

According to All you need to know about CSS Transitions, the clip property is the most performant property to animate. So I kinda want to go with it.

Here is the distilled version of the jsfiddle:

ul {
  clip: rect(auto, auto, 0, auto);
  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(auto, auto, 10rem, auto);
}
<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>

Upvotes: 2

Views: 796

Answers (1)

vals
vals

Reputation: 64244

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>

Upvotes: 2

Related Questions