Html 带有硬停止的背景渐变在Chrome中渲染不正确

我有一个html布局，上面有一个导航栏，下面有一个主内容区域，有一个左右区域。顶部栏有一个背景渐变，其中有一个硬挡块。主要内容的右侧区域（侧边栏）有一个背景颜色，应该与导航区域的渐变停止对齐，为75%

有关我的布局的简化版本，请参见。在Firefox和Safari中，这种效果很好，但Chrome将渐变停止得比它应该的稍微远一点。我尝试使用像素值而不是百分比，但行为保持不变

---

你知道为什么会发生这种情况，并提出了解决办法吗？谢谢

特别是以不同方式处理抗锯齿的现代浏览器。我所做的是一个js修复程序（这对您的代码不好：D），您还必须为每个元素添加一个自定义填充。但你需要雇佣一名自由职业者来为你做这件事，因为这需要一段时间才能完成（浏览器定位、获取每个元素、为每个元素添加填充物……）

---

如果你能发布代码，可能会更简单。但是我正在寻找更多的解决方案。

我在示例中没有看到任何渐变。顶部栏的蓝色背景就是渐变。这是一个chrome bug，已经存在了一段时间了。他们可能永远也不会修复它，因为这样的东西让chrome成为一个糟糕的浏览器