Safari中border-image-width的calc()未正确计算百分比像素混合值？求解决办法

我正在实现一个导航区域，要求两个导航块的顶部边框中央带有箭头图标。选择使用border-image来实现该效果，相关SCSS代码如下：

$arrowWidth: 48px;
$backgroundSidePadding: calc(50% - ($arrowWidth /2));

...

.navigationItemContainer {
  height: 100%;
  border-radius: 4px;
  border-image-slice: 100 0 0 0;
  border-image-width: $arrowWidth $backgroundSidePadding 0 $backgroundSidePadding;
  border-image-outset: calc($arrowWidth / 2) 0 0 0;
...
}

该效果在Chrome和Firefox中显示正常，但在Safari 14.1.1中出现异常：样式面板中的代码显示正常，但计算面板中border-image-width的计算值为36px 32px 0;。请问这是什么原因？我哪里操作有误？是否有办法让该布局在Safari中正常显示？

原因分析 #

Safari 14.1.1对border-image-width的混合单位计算存在兼容性缺陷，尤其是calc(50% - 24px)这类百分比与固定值结合的表达式，无法被正确解析，导致最终计算值偏离预期。同时，border-image-slice: 100 0 0 0的写法虽然在现代浏览器中有效，但旧版Safari对border-image的属性组合支持不完善，进一步加剧了解析异常。

修复方案 #

方案1：改用伪元素实现（推荐）

放弃border-image，通过伪元素实现箭头效果，兼容性更强且维护更简单：

$arrowWidth: 48px;
$borderColor: #ddd; // 替换为你的边框颜色

.navigationItemContainer {
  position: relative;
  height: 100%;
  border-radius: 4px;
  border: 1px solid $borderColor;
  border-top: none; // 去掉顶部边框，留给箭头位置
  padding-top: $arrowWidth / 2;
}

.navigationItemContainer::before {
  content: '';
  position: absolute;
  top: -($arrowWidth / 2);
  left: 50%;
  transform: translateX(-50%);
  // 用CSS绘制箭头（示例为向下三角形）
  border: ($arrowWidth / 2) solid transparent;
  border-bottom-color: $borderColor;
  // 如果是图标替换成下面的代码：
  // width: $arrowWidth;
  // height: $arrowWidth;
  // background: url('你的箭头图标路径') no-repeat center / contain;
}

方案2：兼容Safari的border-image写法

如果坚持使用border-image，需避免混合单位计算：

• 移除SCSS中的calc()表达式，通过JS动态计算容器宽度，算出backgroundSidePadding的固定值后，给元素设置行内样式的border-image-width。
• 或者直接使用固定像素值替代百分比，确保border-image-width的四个值均为固定单位。

补充说明 #

Safari 14.x属于旧版本，对CSS新特性的支持存在诸多局限，伪元素方案不仅能解决当前兼容性问题，后续调整样式也更灵活，建议优先采用。

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