5

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

编辑

为 OP 提供一个示例：

我的问题仅在 Safari 中出现（Chrome 没问题）并且仅在某些机器上出现（可在 MacBook Pros 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>

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

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

更新

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

4

3 回答 3

2

我在 Safari 上遇到了类似的问题，这绝对解决了它：

-webkit-font-smoothing: subpixel-antialiased;

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

于 2014-08-14T17:15:58.283 回答
0

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

请注意，它也可能会对性能产生影响

于 2014-02-13T13:39:05.253 回答
0

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

-webkit-font-smoothing: antialiased;

-webkit-transform:translateZ(0);

-webkit-transform: scale(1);

-webkit-transform:rotate(360deg);

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

于 2014-02-19T14:05:55.860 回答