Safari 11+ doesn't support transitions with CSS calc() function

Question

There has been some kind of update on Safari (including for iOS devices) that made it impossible to have transitions with values determined by CSS function calc(), something that was being covered perfectly on previous versions. I know that there are many workarounds out there, such as calculating the value on javascript and giving it directly to the style of the element, and that fixes the issue, I've done that already.

My main concern is the reason for such change, is CSS calc() function bad for performance? Or is there a brand-new-webkit-annoying-one-liner syntax for this function? Or is Safari simply flicking the finger?

This is useful for me because I've been using this kind of solution to animate hybrid apps with multiple screen size compatibility for a while now.

Here's a code example on how I came across this issue: In my ionic v1 application, there was the following element:

<div class="stream-item" ng-class="stream.fullwidth ? 'full-width' : 'half-width'"></div>

This element had many CSS specifications, including those ones:

.stream-item {
  background-color: white;
  height: 100px;
  transition: all 0.3s ease-in-out;
  -webkit-transition: all 0.3s ease-in-out;
  -webkit-transition: -webkit-transform all 0.3s ease-in-out;
}

.stream-item.full-width {
  width: calc(100% - 48px);
  width: -webkit-calc(100% - 48px);
}
.stream-item.half-width {
  width: calc((100% - 62px) / 2);
  width: -webkit-calc((100% - 62px) / 2);
}

And using AngularJS I was toggling the attribute stream.fullwidth when the user taps on a certain button. Again, this solution was working fine on all previous versions for both iOS and Android devices I only started having this issue after the update to iOS 11.

Important note In order to avoid having any non-related css hierarchy issues I have tested my code with fixed values (such as 100% and 50%), and the animation was working nicely again. But whenever I reinserted the calc() function it stopped working.