我在背景方面遇到了一个奇怪的问题。当我在CSS中将background-attachment更改为fixed时,我的菜单字体变小了,而我无法找出原因。当我将其更改为scroll或local时,它恢复了原来的大小。有什么原因吗?
这个问题只在Safari(Chrome可以)上出现,并且只在某些机器上出现(在MacBook Pro 15“带非视网膜显示器上可重现,但不在iMac和视网膜显示器上)。 操作系统:10.8.5,10.9.1 Safari版本:6.1.1,7.0.1。
不幸的是,我无法通过jsfiddle重现此问题,因为它不会在iframes中发生(但iframes的内容会对其做出反应,这极大地表明了浏览器错误)。
这里是一份HTML示例,您可以在本地查看:
在检查器中选择body标签并切换background-attachment规则,您会发现字体略微变化(变得更细/更粗)。
我想了解这有多大问题以及哪些机器受到影响,以便问题最终可能会传达给某些可怜的苹果开发人员... :)
更新
有趣的事实是:-webkit-transform: translateZ(0);可以用作解决方法。为什么它起作用,我不知道...
编辑
提供一个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!important
。一旦OP发布了一个例子,我相信我们可以找到解决他的问题而不滥用!important
的方法。 - r0skar