Question

在这里尝试了类似帖子的所有答案后，我仍然没有解决问题的运气。

当我在带有文本的元素上使用-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。

任何帮助都会很棒！

由于

Webkit translate3d使我的文字变得模糊

0 个答案: