CSS背景附件和字体
我的背景有一个非常奇怪的问题。当我将背景附件更改为固定在CSS中时，菜单中的字体由于某种我无法弄清楚的原因而变小。当我将其更改为滚动或本地时，它会恢复到预期的大小。有什么原因会发生这种情况吗？
编辑
为 OP 提供一个示例：
该问题仅在 Safari 中发生（Chrome 没问题）并且仅在某些机器上发生（可在带有非视网膜显示屏的 MacBook Pros 15" 上重现，但不会在 iMac 和视网膜显示屏机器上重现）。 操作系统：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 规则。您将看到字体略有变化（更细/更粗）。
我想知道这个问题有多严重以及哪些机器受到影响，这样问题最终可能会影响到一些可怜的苹果开发人员...:)
更新
有趣的事实：-webkit-transform：translateZ (0); 可以用作解决方法。 为什么它有效我不知道......
I have a really weird problem with my background. When I change background-attachment to fixed in css, font in my menu becomes smaller for some reason that I can't figure out. When I changed it to scroll or local it gets back to supposed size. Any reasons why is that happening?
Edit
Providing an example for OP:
The problem occurs for me only in Safari (Chrome is ok) and only on certain machines (reproducible on MacBook Pros 15" with non-retina displays but not on iMacs and retina display machines).
OSX: 10.8.5, 10.9.1
Safari versions: 6.1.1, 7.0.1.
Unfortunately, I cannot reproduce this problem with jsfiddle, as it does not occur within iframes (the content of the iframe reacts to it however, which strongly suggests a browser bug IMHO).
Here's sample HTML instead that you can look at locally:
<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>
Select the body tag in the inspector and toggle the background-attachment rule. What you'll see is that the font changes slightly (slimmer / bolder).
I'd like to find out, how much of a problem this is and what machines are affected, so that the problem might eventually reach some poor Apple dev... :)
Update
Fun fact: -webkit-transform: translateZ(0); can be used as a workaround. Why it works I don't know...
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
我在 Safari 中遇到了类似的问题，这确实解决了它：
而
-webkit-transform:translateZ(0);并不总是有用。I had a similar problem with Safari, and this definitely solved it:
whereas
-webkit-transform: translateZ(0);wasn't always useful.使用
translateZ(0)hack 可以实现硬件加速，这通常会对图像渲染和 UI 重绘产生一些影响。请注意，它还可能会对性能产生影响
Using the
translateZ(0)hack enables hardware acceleration, which has some impact on image rendering and UI redraw in general.Be warned that it may also have performance impacts
您可以尝试其中的任何一种：
当 Safari 上出现奇怪的字体问题时，字体平滑已经为我完成了几次工作。
You could try any of these:
The font smoothing has done the job for me a couple of times when there were strange font issues on Safari.