Safari中的CSS calc属性

Question

因此，请查看以下代码段：

html {
    font-family:'Roboto Condensed', sans-serif;
    text-align: center;
}
em {
    font-style:italic;
}
h1 {
    color: #444;
    font-weight: 700;
    position: relative;
    margin-bottom: 30px;
    padding: 0;
    border-bottom: 0;
    font-size: 56px;
    text-transform: uppercase
}
h1:after {
	position: absolute;
	width: 70px;
	content: "";
	border-bottom: 6px double #ff6b53;
	bottom: -10px;
}
p {
    margin-bottom:60px;
}
span {
    background:rgba(255, 107, 83, 0.75);
    border-radius:3px;
    color:#fff;
    font-weight:bold;
    padding:5px;
}
.heading1:after {
    left: calc(50% - 35px);
}
.heading2:after {
    left:50%;
    margin-left:-35px;
}

<h1 class="heading1">Some Heading 1</h1>
<p><em>Using <span>left: calc(50% - 35px)</span>.</em></p>
<h1 class="heading2">Some Heading 2</h1>
<p><em>Using <span>left:50%</span> and <span>margin-left:-35px</span>.</em></p>

在运行于webkit引擎的chrome中，:after伪元素在两种情况下都正确居中。

但是，在Safari中，calc(50% - 35px)似乎不起作用，而伪元素则与元素的右侧对齐。

我的问题是：有人知道为什么，考虑到Safari也是基于webkit的吗？根据{{​​3}}，calc在Safari上支持buggy，但不能解释原因。