Does IE/Edge animate calc() CSS specs appropriately? - css

Question

Demonstration Link: https://codepen.io/jodriscoll/pen/wRpQOw
I'm working on a "sidewards blind-like" animation behavior, where when a user hovers over an object (anchor), it expands the object (anchor) in width and creates a perception of showing more of the objects contain within (think of a clipping mask of sorts).
Initially the video/image object is styled in a way to prevent it from moving 1:1 with the "clipping mask" (anchor wrapping the video/image). Meaning, it is already offset to the position it should be when the user hovers over the anchor.
Both the image and the video are initially styled to fill the entirety of the anchor AND the gutter gaps; this helps when animating to create the perception that we're just showing more of the photo, no actually resizing it and causing it to move on screen (sorry, that might be confusing...):
left: -24px; // the width of each gutter gap
width: calc(100% + 48px); // fill the parent + fill the gutter gaps
When the user hovers over the anchor, the child elements change their CSS specs to:
left: 0; // stay flush with the anchor object
width: 100%; // fill the parent, which now includes the gutter gap(s)
Everything appears to work correctly when viewing the animation behaviors on Chrome / Safari / Firefox:
http://svg-gmmb-cis.pantheonsite.io/wp-content/uploads/2019/01/debugging_animations.mp4
Unfortunately, there is a slight hiccup on IE11/Edge:
http://svg-gmmb-cis.pantheonsite.io/wp-content/uploads/2019/01/IE_animation_bug.mp4
Questions and hopeful helpful insight towards reaching an answer:
After viewing the animation glitch, does IE11/Edge have issues with animating CSS measures using calc()?
Do I need to create a CSS animation with keyframes to remedy this hiccup in IE11/Edge?
Am I approaching this wrong and should be animating different properties?

Answer 1

You can do this easily with margin and avoid the use of calc.
Here is a simplified example:
.container {
border:1px solid;
padding: 0 24px;
height:100px;
}
.box {
height:100%;
background:red;
transition:.5s all;
}
.box:hover {
margin:0 -24px;
}
<div class="container">
<div class="box"></div>
</div>
Or like this:
.container {
border:1px solid;
margin: 0 24px;
height:100px;
}
.box {
height:100%;
background:red;
transition:.5s all;
}
.box:hover {
margin:0 -24px;
}
<div class="container">
<div class="box"></div>
</div>