以下代码在屏幕上放置了一个白框。如果您在 iPad 上运行它(您也可以调整像素以在 iPhone 上运行它)，当您触摸该框时，它会快速离开屏幕，并在其底部边缘留下白色像素痕迹。
<!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>
解决这个问题的关键是使用边框半径，并制作动画。如果你只是把它从屏幕上弹出，就没有踪迹。如果没有边界半径，则没有轨迹。
以下是我目前发现的解决方法:
.panel.hide { -webkit-border-radius: 0; }
丑陋，而且对我的应用程序来说不是很实用，因为我正在为面板内外设置动画，而且我真的想要在屏幕上显示圆 Angular 。
另一个:
.panel { -webkit-transform: translateZ(0); }
这会将面板放入硬件管道，从而正确地进行合成。虽然这适用于这个简单的演示，但在我的真实 Web 应用程序中使用硬件管道会导致内存不足错误。 (激烈的、巨大的、直接的变化。)
关于如何摆脱这条线索的任何其他想法？
最佳答案
解决方案
box-shadow: 0 0 1px rgba(0, 0, 0, 0.05);
如果您觉得这太明显，您可以使用框的背景颜色作为 box-shadow 颜色。
或者，根据这个answer on a similar issue in Chrome (感谢 Sebastian 在提示的评论中)，您可能想尝试:
outline: 1px solid transparent;
发生了什么事？
我给了一个 fairly lengthy explanation别处，但这里是简短的版本。出于性能原因，WebKit 仅重绘页面中它认为可能已更改的部分。然而，iOS(pre-7)Safari 实现的边框半径抗锯齿超出了盒子的计算尺寸几个像素。因为 WebKit 不知道这些像素，所以它们不会被重绘；相反，它们被留在后面并在每个动画帧上累积。
通常的解决方案——正如我在其他答案中所建议的那样——是强制该元素需要硬件加速，以便它被绘制为一个单独的层。但是，过多的小元素或一些大元素会导致将大量图 block 推送到 GPU，从而对性能产生明显影响。
使用 box-shadow 更直接地解决了这个问题:它扩展了框的重绘尺寸，迫使 WebKit 重绘额外的像素。移动浏览器中 box-shadow 的已知性能影响与使用的模糊半径直接相关，因此一个像素的阴影应该几乎没有影响。
关于css - Webkit 动画在屏幕上留下垃圾像素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/9983520/