2

在尝试了此处类似帖子的所有答案后,我仍然无法解决我的问题。

当我在带有文本的元素上使用 -webkit-transform: translate3d 时,文本会明显模糊。我已经通过 jsfiddle 复制了下面的问题,但只有在一定宽度时才会出现(尝试调整浏览器大小以查看问题)

http://jsfiddle.net/H4JAM/

<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。

任何帮助都会很棒!

谢谢

4

0 回答 0