当前位置: 首页 > 面试题库 >

CSS3转换会影响Chrome / Safari的其他元素

戚宏扬
2023-03-14
问题内容

我遇到了一个问题,我的css3转换会影响页面上的其他元素,甚至导致它们闪烁。我看到了另一篇关于此的文章,但是他们没有解决该问题的方法。

当您滚动导航时,您会看到动画的css3转换。在Firefox中它可以正常工作而不会闪烁,但是对于chrome和safari,效果非常明显,您可以在下拉菜单项和页脚文本中看到它。


问题答案:

这是Chrome22(显然是Safari)上Macintosh文本呈现的一个已知问题。GPU加速导致MacOS从亚像素切换到灰度抗锯齿,这使得字体粗细似乎明显降低。

更新:

如下面的OP所述,此修复程序将适用-webkit-font-smoothing: antialiased-它始终应用灰度抗锯齿。如果这样做,由于灰度抗锯齿文字看起来比亚像素细得多,因此您可能想在所有位置增加字体粗细

您可以通过应用一些属性来获得相同的效果,这些属性会导致内容始终被GPU加速(例如背面可见性:隐藏),但是由于不能保证这些属性在将来的浏览器版本中会导致GPU加速-将来可以证明只需指定灰度即可。



 类似资料:
  • 问题内容: 我想做的是将某个对象悬停时,它会影响另一个对象的属性。 例如,在这个JSFiddle演示中,当您将鼠标悬停在其上时,它会发生变化,但是我想要的是,当我将鼠标悬停在上时,它会受到影响。 问题答案: 如果多维数据集直接位于容器内部: 如果多维数据集位于容器旁边(在容器关闭标签之后): 如果多维数据集在容器内的某个位置: 如果多维数据集是容器的同级:

  • 比如说,一个 mysql sevrer 有 100 个连接 这一百个连接什么 level 都有 假如现在执行一个 level 为 SERIALIZABLE 的 crud sql 什么,此时 mysql server 会停掉其他 99 个连接的 sql 来实现 SERIALIZABLE 吗? 这个问题的意思就是,SERIALIZABLE level 只会让其他 SERIALIZABLE level,

  • 我使用的是ListView,每个列表元素上都有几个按钮。 单击行上的按钮时,该按钮应消失。单击按钮时,单击的按钮会消失,这没关系。问题是其他一些列表元素按钮也不见了。 例如,当我点击第一元素按钮时,它也会影响第六、第十一、第十六元素中的按钮。 原因是适配器没有为数据中的所有元素创建列表元素。它只创建了几个足以在屏幕上显示的对象。如图所示,在列表中向下移动时,top元素成为最后一个元素,其值也发生了

  • 问题内容: 我在chrome中遇到了css3转换旋转过渡的问题。过渡效果很好,但是在完成过渡后,元素移位了一个像素。另一个奇怪的事情是,它仅在页面居中()时发生。如果同时删除过渡,该错误仍然存​​在。 HTML: CSS: 注释掉该行以使其消失。 任何人都有任何想法如何在保持页面居中的同时停止此操作? 我在OSX 10.6.8上使用版本24.0.1312.57 干杯 问题答案: 实际上,只需将其添

  • 我正在使用PowerMock测试中断异常情况下的错误处理。不幸的是,这些测试有时似乎对其他测试类有一些副作用:我在一个测试类中配置的模拟似乎在另一个测试类中仍然存在。为了产生副作用,我将下面的示例简化为基本行。 让我们假设我们有一个类要测试: 以及一个使用PowerMock测试私有方法的测试类: 当我现在创建另一个测试类(在第一个测试类之后执行)时,如下所示: 我立即得到以下异常: 如果我在第一节

  • 我有一个包含三个模块的工作簿,总共大约19000行代码。 我添加了多个按钮来运行性能完美的子程序。 我添加了四个新的子程序(都很短,总共可能有200行)来复制/粘贴数据并构建一个图形。 当我添加这些子例程时,所有其他子例程都开始异常缓慢地运行(从5-10秒到几分钟,有些子例程完全冻结)。 我有一个解决方法的想法(每次运行例程时关闭和打开自动计算),但我试图理解为什么这是一个问题。 Excel在待机