Question

我的背景有一个非常奇怪的问题。当我将背景附件更改为固定在css中时，我的菜单中的字体因为某些我无法弄清楚的原因而变小。当我将其更改为滚动或本地时，它会恢复到所谓的大小。出现这种情况的原因是什么？

修改

为OP提供示例：

问题出现在我身上只有Safari（Chrome就可以），并且只在某些机器上出现（可在MacBook Pro 15上重复使用非视网膜显示屏，但不能在iMac和视网膜显示屏上显示）。 OSX：10.8.5,10.9.1 Safari版本：6.1.1,7.0.1。

不幸的是，我不能用jsfiddle重现这个问题，因为它不会发生在iframe中（iframe的内容会对它做出反应，但强烈暗示浏览器错误恕我直言）。

以下是您可以在本地查看的示例HTML：

<html>
    <body style="background-image: url(http://static4.depositphotos.com/1000419/321/v/950/depositphotos_3210195-Art-tree-beautiful-black-silhouette.jpg); background-attachment: fixed;">
    <p style="font-family: Arial; font-size: 30px;">some fun text</p>
    </body>
</html>

在检查器中选择正文标记，然后切换background-attachment规则。您会看到字体略有变化（更纤细/更粗）。

我想知道，这有多少问题以及哪些机器受到影响，以便问题最终可能会影响到一些可怜的Apple开发人员... :)

更新

有趣的事实：-webkit-transform: translateZ(0);可用作解决方法。 为什么它有效我不知道......

Answer 1

我遇到类似Safari的问题，这肯定解决了它：

-webkit-font-smoothing: subpixel-antialiased;

而-webkit-transform: translateZ(0);并不总是有用。

Answer 2

使用translateZ(0) hack启用硬件加速，这通常会对图像渲染和UI重绘产生一些影响。

警告它可能还有performance impacts

Answer 3

您可以尝试以下任何一项：

-webkit-font-smoothing: antialiased;

-webkit-transform:translateZ(0);

-webkit-transform: scale(1);

-webkit-transform:rotate(360deg);

当Safari上出现奇怪的字体问题时，字体平滑已经为我完成了几次这样的工作。

css背景附件和字体

修改

更新

3 个答案: