Webkit 动画在屏幕上留下垃圾像素 [英] Webkit animation is leaving junk pixels behind on the screen
问题描述
以下代码在屏幕上放置一个白框.如果你在 iPad 上运行它(你也可以调整像素以在 iPhone 上运行它)，当你触摸盒子时，它会从屏幕上滑落，并在它的底部边缘留下一串白色像素的痕迹.
The following code puts a white box on the screen. If you run this on an iPad (you can adjust the pixels to run it on an iPhone, too), when you touch the box, it will scoot off the screen, and leave a trail of white-ish pixels along its bottom edge.
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-height, user-scalable=no, maximum-scale=1, minimum-scale=1" />
<title>Line Bug Demo</title>
<style>
body {
background: black;
}
.panel {
background: white;
position: absolute;
z-index: 2;
width: 1000px;
height: 500px;
top: 34px;
left: 12px;
-webkit-border-radius: 20px;
-webkit-transition: left 0.333s ease-in-out;
}
.panel.hide {
left: -1000px;
}
</style>
</head>
<body>
<div class="panel" onclick="this.setAttribute('class', 'panel hide')"></div>
</body>
</html>
获得bug的关键是使用边界半径，并做动画.如果您只是将其从屏幕上弹出，则不会有任何痕迹.如果没有边界半径，就没有踪迹.
The key to getting the bug is using a border radius, and doing animation. If you just pop it off the screen, no trail. If there is no border radius, no trail.
以下是我目前找到的解决方法:
Here are the work-arounds I've found so far:
.panel.hide { -webkit-border-radius: 0; }
丑陋，对我的应用程序来说不太实用，因为我正在为面板内外设置动画，而且我真的想要在屏幕上显示圆角.
Ugly, and not really practical for my application, because I'm animating the panel both in and out, and I really want the rounded corners when it is on screen.
另一个:
.panel { -webkit-transform: translateZ(0); }
这会将面板放入硬件管道中，从而正确地进行合成.尽管这适用于这个简单的演示，但在我的真实 Web 应用程序中使用硬件管道会导致内存不足错误.(剧烈的、巨大的、直接的变化.)
That puts the panel into the hardware pipeline, which does the compositing correctly. Although this works with this simple demo, using the hardware pipeline in my real web app causes out-of-memory errors. (Of the drastic, huge, immediate variety.)
关于我如何摆脱这条线索还有其他想法吗?
Any other ideas of how I might get rid of this trail?
推荐答案
解决办法
box-shadow: 0 0 1px rgba(0, 0, 0, 0.05);
如果你觉得这太明显了，你可以使用盒子的背景颜色作为 box-shadow 颜色.
You can use the background colour of your box as the box-shadow colour if you feel this is too noticeable.
或者，根据这个回答Chrome 中的类似问题(感谢 Sebastian 在提示的评论中)，您可能想要尝试:
Alternatively, according to this answer on a similar issue in Chrome (thanks to Sebastian in the comments for the tip-off), you may want to try:
outline: 1px solid transparent;
发生了什么事?
我给了一个 相当冗长的解释 其他地方，但这里是简短的版本.出于性能原因，WebKit 仅重绘它认为可能已更改的页面部分.但是，边界半径的 iOS(7 之前)Safari 实现会在超出计算的框尺寸的几个像素处消除锯齿.因为 WebKit 不知道这些像素，所以它们不会被重绘；相反，它们会被抛在后面并在每个动画帧上堆积.
What's going on?
I've given a fairly lengthy explanation elsewhere, but here's the short version. For performance reasons, WebKit only repaints those part of a page that it thinks might have changed. However, the iOS (pre-7) Safari implementation of border radius anti-aliases a few pixels beyond the calculated dimensions of a box. Since WebKit doesn't know about these pixels, they don't get redrawn; instead, they are left behind and build up on each animation frame.
通常的解决方案——正如我在另一个答案中所建议的——是强制该元素需要硬件加速，以便它被绘制为一个单独的层.但是，过多的小元素或少数大元素会导致大量图块被推送到 GPU，对性能产生明显影响.
The usual solution—as I suggested in my other answer—is to force that element to require hardware acceleration so that it gets painted as a separate layer. However, too many small elements or a few large ones will result in a lot of tiles getting pushed to the GPU, with obvious performance implications.
使用 box-shadow 更直接地解决问题:它扩展了框的重绘尺寸，迫使 WebKit 重绘额外的像素.box-shadow 在移动浏览器中的已知性能影响与使用的模糊半径直接相关，因此一个像素的阴影应该几乎没有影响.
Using box-shadow solves the problem more directly: it extends the repaint dimensions of the box, forcing WebKit to repaint the extra pixels. The known performance implications of box-shadow in mobile browsers are directly related to the blur radius used, so a one pixel shadow should have little-to-no effect.
这篇关于Webkit 动画在屏幕上留下垃圾像素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
