Html Safari字体对背景图像的渲染效果不佳

-只有Safari的问题

HTML

我已经找到了很多相关的帖子（例如），但是没有一篇能够直接解决背景图像似乎是罪魁祸首的问题

---

只有在Safari中，我才会遇到字体在背景图像上呈现不好的问题，但是当我删除背景图像并将其设置为灰色时，字体看起来很好。

寻求代码帮助的问题必须包含在问题本身中重现它所需的最短代码。请参阅使用css，将图像或两者与文本一起放在硬件层上，然后查看是否有任何不同的-（-webkit transform:translateZ（0）；transform:translateZ（0）；）通常可以消除模糊-我对其进行了拍摄，但似乎没有任何效果。这里有一支笔来演示这个问题。

<div id="background"></div>

<div class="text">
  This is some sample text that doesn't look great.
</div>

<div class="text text-background">
  This is some sample text that looks stellar!
</div>

#background {
  background-image: url("https://s3-us-west-2.amazonaws.com/ks.test/beaver_creek.jpg");
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
}

.text {
  color: white;
  font-family: "Lato";
  font-size: 20px;
  font-weight: 300;
  position: relative;
}

.text-background {
  background-color: #464646;
  height: 50px;
  line-height: 50px;
  margin-top: 10px;
}