我写了一个小示例页面，其中的元素可以在触摸设备上拖动（基于Peter-Paul Koch的代码）。
我有两个可拖动的<div>元素：一个绿色块和一个红色球（通过border-radius制作成球形）。拖动是通过使用ontouchstart、ontouchmove和ontouchend实现的，并且“动画”是通过改变这些元素的top和left CSS属性来完成的。
当我拖动绿色块时，一切都很顺利。
但是，在iPad 1（运行iOS 5.1.1）或iPad 3（6.0.1）的Safari中拖动红色块时，会在圆形后缘留下小的浅红色轨迹（请参见下面的截屏）。
然而，在我的iPhone 5（6.1.4）上看不到这些轨迹。
有没有办法消除这些轨迹？
(附加问题：这种效果有术语吗？“Ghosting”？“Artifacts”？)
将以下规则添加到您的#bawl { … }样式集中：
-webkit-transform: translateZ(0);
outline: 1px solid transparent——更多详情请参见我对类似问题的回答。)RenderObject，后者具有绘制单个DOM节点所需的全部信息。每个RenderObject都映射到其自身或祖先的RenderLayer，后者是一种处理节点"分层"方式的概念方法，即覆盖或底部绘制其他节点。RenderLayer。首先绘制该层后方的子元素，然后是该层本身，最后是位于该层前面的子元素。为了自行绘制，RenderLayer会在相应的RenderObject上调用paint方法。RenderLayer：软件路径和硬件加速路径。软件路径直接将每个RenderObject绘制到您在浏览器中看到的呈现网页的图像中，而硬件路径允许将某些RenderLayer指定为合成层，这意味着它及其子元素将被分别绘制，最后由GPU合成为单个图像。只要页面上的一个或多个RenderLayer需要硬件加速，或者浏览器中的标志明确要求（例如Chrome），就会使用硬件路径。
RenderLayer的位。跨越损坏矩形的RenderLayer将完全被跳过。
如果您正在通过软件路径进行渲染，WebKit会直接将损坏矩形区域重新组合到完整渲染页面的位图图像上，其余部分则不变。然而，硬件路径需要单独重新绘制每个合成层，并将它们重新组合成一个新的图像。
translateZ修复方法会对元素应用3D转换。这将强制渲染球的RenderLayer需要硬件加速，这意味着WebKit将使用硬件路径而不是软件路径。这说明问题与使用软件路径有关。
当球被绘制时，边框半径意味着边缘被反锯齿处理。由于与Quartz相关的已知问题, 形状的边缘被反锯齿处理，导致一些像素超出了在页面上更改球的位置时计算的损伤矩形区域。使用软件路径，浏览器只会重绘已更改的渲染页面图像区域，其余部分则不受影响。超出此区域的半透明像素不会更新，这就解释了在移动球时留下的瑕疵。
对比而言，硬件路径会单独重绘该层（以及其子层），然后重新合成页面。上次渲染该层时不会留下任何“幽灵像素”。compositing layers是代码吗？如果不是，就不应该用反引号标记。 - Paul D. Waite<dfn>。 :) - Jordan Gray在所有 WebKit 浏览器（移动和桌面）上都遇到了类似的问题。
我清除了缓存和其他一切，之后错误就再也没有出现过。 而且似乎只有我能看到它。我在这里发布了它，但因为没有人遇到这个问题，所以得到了很多负评...
不过，我会尝试一下，说不定会奏效。