Html 如何避免在css转换中缩放锚点时出现文本抖动？_Html_Css

Html 如何避免在css转换中缩放锚点时出现文本抖动？

html css

Html 如何避免在css转换中缩放锚点时出现文本抖动？,html,css,Html,Css,在CSS3 transition和scale（）的帮助下，我正在尝试增加链接项的缩放比例，同时将鼠标悬停在链接项上。除了一个恼人的问题外，一切都进行得很顺利——锚元素中的文本以一种丑陋的冲动增加，破坏了这种酷效果的美丽。如果您运行下面的代码，将鼠标悬停在分页链接上时会看到奇怪的文本抖动问题。我们怎样才能防止这种情况发生 .pagination{ 字体系列：Arial、Helvetica、无衬线字体；字体大小：14px；文本对齐：居中； } .页码a{ 填充：8px 16px；利润率：0.

在CSS3 transition和scale（）的帮助下，我正在尝试增加链接项的缩放比例，同时将鼠标悬停在链接项上。除了一个恼人的问题外，一切都进行得很顺利——锚元素中的文本以一种丑陋的冲动增加，破坏了这种酷效果的美丽。如果您运行下面的代码，将鼠标悬停在分页链接上时会看到奇怪的文本抖动问题。我们怎样才能防止这种情况发生

.pagination{
字体系列：Arial、Helvetica、无衬线字体；
字体大小：14px；
文本对齐：居中；
}
.页码a{
填充：8px 16px；
利润率：0.4px；
边框：1px实心#ddd；
文字装饰：无；
颜色：#000000；
显示：内联块；
-webkit过渡：所有0.3秒轻松；
-o-过渡：所有0.3秒的速度；
-moz转换：所有0.3秒轻松；
过渡：所有0.3秒缓解；
}
.分页a：悬停{
背景色：#ddd；
-webkit转换：比例（1.5）；
-ms变换：比例（1.5）；
-o变换：比例（1.5）；
-moz变换：比例（1.5）；
转换：比例（1.5）；
}
.pagination span.current{
填充：8px 16px；
利润率：0.4px；
边框：1px实心#4CAF50；
背景色：#4CAF50；
颜色：#FFF；
}
.分页跨度已禁用{
填充：8px 16px；
利润率：0.4px；
边框：1px实心#EEE；
颜色：#DDD；
/*显示：无；*/
}


&拉阔；上
1.
...

此修复程序正在添加

.pagination {
    -webkit-transform: translateZ(0);
       -moz-transform: translateZ(0);
            transform: translateZ(0);
}

.pagination a {
    -webkit-backface-visibility: hidden;
       -moz-backface-visibility: hidden;
            backface-visibility: hidden;
    -webkit-transform-style: preserve-3d;
       -moz-transform-style: preserve-3d;
            transform-style: preserve-3d;
}

。。。到你的CSS

但是，在您的情况下，由于字体太小太薄，由于

变换

效果结束时的亚像素渲染，您仍然会遇到一些抗锯齿跳变。对于这种情况，唯一有效的解决方案（如果更改

字体系列

或

字体重量

是不可接受的），是将

字体大小

更改为十进制像素，直到找到效果不太明显的值

font-size: 14.5px;

。。。看来你的情况有所改善。Fiddle.

对此的修复是添加

.pagination {
    -webkit-transform: translateZ(0);
       -moz-transform: translateZ(0);
            transform: translateZ(0);
}

.pagination a {
    -webkit-backface-visibility: hidden;
       -moz-backface-visibility: hidden;
            backface-visibility: hidden;
    -webkit-transform-style: preserve-3d;
       -moz-transform-style: preserve-3d;
            transform-style: preserve-3d;
}

。。。到你的CSS

但是，在您的情况下，由于字体太小太薄，由于

变换

效果结束时的亚像素渲染，您仍然会遇到一些抗锯齿跳变。对于这种情况，唯一有效的解决方案（如果更改

字体系列

或

字体重量

是不可接受的），是将

字体大小

更改为十进制像素，直到找到效果不太明显的值

font-size: 14.5px;

。。。看来你的情况有所改善。小提琴。

你的意思是文本在缩放后有点抖动？说实话，我几乎没有注意到这一点；如果你没有引起我的注意，我可能根本没有注意到。哈，真奇怪！这对我来说很明显，即使你已经创建了它，我也会注意到它…你的意思是文本在缩放后有点抖动？说实话，我几乎没有注意到这一点；如果你没有引起我的注意，我可能根本没有注意到。哈，真奇怪！这对我来说太明显了，即使你创造了它，我也能注意到……看起来不错。是的，是抗锯齿造成的。在放大和缩小图像时也会发生这种情况。@Andrei Gheorghiu，我不认为使用上述提供的解决方案已经解决了这个问题。我仍然可以观察到文本抖动。是的，这是抗锯齿问题，它与硬件资源有关。不确定它在视网膜显示中是否仍然可见…@user5307298，根据我提供的信息，它在Ubuntu上的Chrome浏览器中几乎不可见，例如

、

和

Next

。因此，在您的设置中可能比在其他设置中更可见。无法确定，但可能与浏览器和/或系统字体设置、图形卡等有关。我想说的是，在大多数设置中，上面的内容都是不错的，作为开发人员，您对此无能为力。我使用的是FF 50，与其他版本相比，它可能在这个版本中更为明显。@user5307298，我已经用一个具有最大向后兼容性的完全带前缀的版本更新了我的答案。看看是否有帮助。我不知道为什么，但自从我读到你的问题后，我就认为你在Chrome上。FF作为首选浏览器？好啊FF作为web开发工具？谢谢，但是不，谢谢…看起来不错。是的，是抗锯齿造成的。在放大和缩小图像时也会发生这种情况。@Andrei Gheorghiu，我不认为使用上述提供的解决方案已经解决了这个问题。我仍然可以观察到文本抖动。是的，这是抗锯齿问题，它与硬件资源有关。不确定它在视网膜显示中是否仍然可见…@user5307298，根据我提供的信息，它在Ubuntu上的Chrome浏览器中几乎不可见，例如

、

和

Next