Why does one translate differently from the other?

IE11 and edge are buggy with ‘calc’ at the best of times and when used in linear gradients (or things like translate and transforms) then things start going wrong.

In your fiddle (with code corrected) both versions work in IE11/edge when run natively (outside of jsfiddle). However if you open the inspect panel in IE then both versions revert to the incorrect version. This also happens in your fiddle and if you open the inspect panel both examples are messed up.

This suggests that IE is buggy with calc in those examples and can’t be relied upon. You would need to use an actual percentage rather than the (calc 50% - 3px) that you are using.

Unfortunately I don’t see an alternative solution for IE other than using specific % values.

1 Like