在尝试了此处类似帖子的所有答案后,我仍然无法解决我的问题。
当我在带有文本的元素上使用 -webkit-transform: translate3d 时,文本会明显模糊。我已经通过 jsfiddle 复制了下面的问题,但只有在一定宽度时才会出现(尝试调整浏览器大小以查看问题)
<div class="blur-percentage">Text with percentage</div>
<div class="blur-fixed">Text with fixed</div>
.blur-percentage {
-webkit-transform: translate3d(0%,0,0);
font-family: Arial;
width: 50%;
float: left;
}
.blur-percentage.move {
-webkit-transform: translate3d(50%,0,0);
}
.blur-fixed {
-webkit-transform: translate3d(0px,0,0);
font-family: Arial;
width: 50%;
float: left;
}
.blur-fixed.move {
-webkit-transform: translate3d(200px,0,0);
}
$('.blur-percentage').on('click' , function() {
$(this).addClass('move')
})
$('.blur-fixed').on('click' , function() {
$(this).addClass('move')
})
另外 - 问题的截图.. http://i.imgur.com/WPYrWpm.png
当给出百分比而不是固定数字时,就会发生这种情况,即 - 50%,而不是 200px。
任何帮助都会很棒!
谢谢