logo标签列表

CSS背景附着和字体

cssfontssafaritext-renderingbackground-attachment
5
我在背景方面遇到了一个奇怪的问题。当我在CSS中将background-attachment更改为fixed时，我的菜单字体变小了，而我无法找出原因。当我将其更改为scroll或local时，它恢复了原来的大小。有什么原因吗？

编辑

提供一个OP的示例：
这个问题只在Safari（Chrome可以）上出现，并且只在某些机器上出现（在MacBook Pro 15“带非视网膜显示器上可重现，但不在iMac和视网膜显示器上）。 操作系统：10.8.5，10.9.1 Safari版本：6.1.1，7.0.1。
不幸的是，我无法通过jsfiddle重现此问题，因为它不会在iframes中发生（但iframes的内容会对其做出反应，这极大地表明了浏览器错误）。
这里是一份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);可以用作解决方法。为什么它起作用，我不知道...
展示你的代码。尝试在分号前添加!important。 - Zhianc
@jcdavid：我建议除非绝对必要，否则不要使用!important。一旦OP发布了一个例子，我相信我们可以找到解决他的问题而不滥用!important的方法。 - r0skar
如果你真的想让一个“标签”，“类”或“ID”具有不可更改的值，那么你必须在你的值后面写上“!important”。在这种情况下，你需要写“font-size: 30px !important;”。但是，如果你已经有了一个很高的“font-size”值，那么你可以直接使用“h1”标签。 - user2628521
3个回答
2

我曾经在Safari上遇到过类似的问题，这个方法可以解决：

-webkit-font-smoothing: subpixel-antialiased;

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

0

你可以尝试以下任何一种方法：

-webkit-font-smoothing: antialiased;

-webkit-transform:translateZ(0);

-webkit-transform: scale(1);

-webkit-transform:rotate(360deg);

字体平滑处理在Safari出现奇怪的字体问题时，曾经帮我解决了几次。

正如我在帖子中所写的：“translateZ（0）”对我有效。然而，问题并不是要找到解决方法。 - Max Leske
1
为什么它有效的简短回答是因为添加transform属性会将元素提升到新的GPU层，我对此并不是很熟悉，但这里有一个很好的讲解视频：https://www.youtube.com/watch?v=n8ep4leoN9A - Jon Snow
0

使用translateZ(0)技巧可以启用硬件加速，这对图像渲染和UI重绘有一定影响。

请注意，它可能还会产生性能影响。

我知道这一点，我更想知道为什么以及谁使用了什么机器。 - Max Leske
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接