Webkit-based blurry/distorted text post-animation via translate3d
但问题依然存在.
我做了非常简单的例子来告诉你它是怎么样的.如何解决这个问题？
var text = 1;
function next() {
var next = (text == 2) ? 1 : 2;
document.getElementById('text' + text).className = 'out';
document.getElementById('text' + next).className = 'in';
text = next;
}
body {
padding: 0;
margin: 0;
font-family: tahoma;
font-size: 8pt;
color: black;
}
div {
height: 30px;
width: 100%;
position: relative;
overflow: hidden;
margin-bottom: 10px;
}
div div {
opacity: 0;
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
}
.in {
-webkit-animation: comein 1s 1;
-moz-animation: comein 1s 1;
animation: comein 1s 1;
animation-fill-mode: both;
}
@keyframes comein {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.out {
-webkit-animation: goout 1s 1;
-moz-animation: goout 1s 1;
animation: goout 1s 1;
animation-fill-mode: both;
}
@keyframes goout {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
<div> <div class="in" id="text1">Hello! I'm Test Text. I'm Test Text jr Father!</div> <div id="text2">Hi,I'm test text jr. I'm sharp and beautiful by nature but when I came in,Chrome made me blurry and I'm bad,I'm bad! ... Who's bad :)</div> </div> <button onclick="next();">Next</button>
您也可以在CodePen看到这个例子
解决方法
从其中一个开发人员来说,状态很有希望：
The problem was due to we raster things in an element’s local space.
If the element has a fractional translation,then the rasterized
texture would be pasted onto the screen with the fractional
translation using linear resampling,resulting in the blur.The solution is to raster things in a space that is pixel-aligned to
our physical screen. i.e. applying the fractional translation to the
vector graphics commands instead of rastered texture.The fix will be coming in two parts:
The first part that allows our raster system to raster with any general matrix. This part is almost done. I have a WIP but it still
has a bug that causes performance regression. I expect to finish it
within a few days. 07001The second part that allows our tiling management to be able to manage set of textures that comes with different raster translation. I was originally going for general matrix but turns out the tile coverage computation becomes very difficult. I will instead do a simpler version that only supports translation and scale. I estimate this will need another week of work.
