在Safari中同步GPU /非GPU CSS过渡

Question

布局元素中的两个元素通过CSS转换同时生成动画，具有相同的持续时间和缓动。侧边栏滑入（非画布导航），主要内容相应地改变了它的宽度。

当侧边栏转换是硬件加速且主要内容不是时，例如：

.sidebar {
  transition: transform 0.4s ease-in-out;
}

.main-content {
  transition: margin 0.4s ease-in-out;
}

MacOs Safari 10.0.3 中的转换显着不同步（在MacO上的其他浏览器中几乎完美），而在{{上使用非硬件加速属性时则不是这种情况1}}（.sidebar，margin / left，right）。

这是两个版本的工作示例：
https://codepen.io/anon/pen/wJjJPd

我正在寻找一种方法来同步两个转换，因为它们具有完全相同的时序参数，但其中只有一个是硬件加速的。