IE11, Edge calc() Problems

[koenigsegg1]

I just tested one of my pens (http://codepen.io/koenigsegg1/pen/GoEvRd) in Edge and IE and noticed that the both of them were not transitioning the right property with the calc()value. Can someone explain why and, if possible, provide a solution?

The blue menu is the part that is not transitioning properly.

Any help is greatly appreciated.

[koenigsegg1]

Bump…

[timbarden]

Hey,

From what I’ve read it appears to be a bug, which is a bit pants.

However, there does seem to be a solution. From what I’ve read here you can use multiple translateX values instead to compensate for the calc. Eg: transform: translateX(100%) translateX(-20px);. I’ve learnt something today!

I forked your Pen and tested it with IE in BrowserStack – seems OK now :)

http://codepen.io/timbarden/pen/jWXmob?editors=010

Tim

[koenigsegg1]

Thanks, Tim, that’s very interesting! The forked pen doesn’t have the same effect as the original one, but I think I can work out some of the kinks.

Thanks Much!

[Shikkediel]

It’s listed as a known issue here :

http://caniuse.com/#feat=css-transitions

[koenigsegg1]

@Shikkediel Thanks for the resource.

[Author]

Posts