Safari 11+（含iOS）不再支持CSS calc()过渡，求变更原因

Hey, great question—let’s break down exactly why your calc()-based transitions stopped working after updating to iOS 11, since you already have a reliable JS workaround in place.

First, let’s rule out your initial hypotheses: #

• It’s not a performance issue: Calc() had already been optimized in prior Safari versions, and iOS 11 didn’t deprecate this pattern for performance reasons. This was purely a rendering logic bug, not a performance-related cut.
• It’s not a new -webkit- syntax requirement: You’re already including -webkit-calc(), but by iOS 11, Safari fully supported standard calc() without prefixes. The prefix wasn’t the problem here.

The real root cause: WebKit rendering engine compatibility bug #

iOS 11 shipped with an update to the WebKit engine that changed how it handles transitions for properties using calc() values. Here’s the breakdown:
When you toggle the full-width/half-width classes via AngularJS, Safari in iOS 11 didn’t properly detect the computed value change from the calc() expressions. Instead of calculating the actual pixel width before/after the class switch (which triggers the transition), it treated the calc() string itself as the property value. Since the property changed from one calc expression to another (not a clear numeric value), the engine didn’t recognize it as a valid transition trigger.

This directly explains why fixed values (like 100% or 50%) worked—those are direct, easily comparable values that the engine can immediately detect as changing, so it fires the transition as expected.

Quick side note on future compatibility #

While your JS approach (calculating the value and assigning it directly) is solid for iOS 11 support, later iOS versions (11.2 and above) fixed this WebKit bug. So if your app supports newer iOS releases, the calc() transition should work again without workarounds.

内容的提问来源于stack exchange，提问作者Gabcvit