我如何避免在iPad上的可拖动边框半径元素上的animation制品？
我已经写了一个可以在触摸设备上拖动的元素的示例页面（基于Peter-Paul Koch的代码 ）。
- 我的示例页面
我有两个可拖动的<div>元素：一个绿色的块和一个红色的球（球形的border-radius ）。 拖动是通过ontouchstart ， ontouchmove和ontouchend ，“animation”是通过改变这些元素的top和left CSS属性来完成的。
当我拖着绿色的，都是玫瑰和马驹。
但是，当我在iPad 1（运行iOS 5.1.1）或iPad 3（6.0.1）的Safari上拖动红色的Safari时，我会在圆圈的后边缘（见下面的屏幕截图）获得浅红色的小道。
但是，我并没有在iPhone 5（6.1.4）上看到这些path。
有没有办法摆脱这些痕迹？
（奖金问题：是否有这个效果？“重影”？“神器”？）
修复
将此规则添加到#bawl { … }规则#bawl { … } ：
-webkit-transform: translateZ(0);
（如果您需要避免硬件加速，则可以使用outline: 1px solid transparent – 有关更多详细信息，请参阅我对类似问题的回答 。）
这删除了后面的文物，但是为什么？ 它是Quartz（iOS中的绘图引擎）的一种组合，不会将消除锯齿的行剪切到形状的边缘，以及WebKit如何在部分网页改变后重新绘制网页。
绘制一个网页
首先，快速地（通过）简化了WebKit如何从DOM节点树到表示渲染的网页的位图图像。
你已经知道一个网页被parsing成一个叫做DOM的元素树。 DOM中的每个节点都以某种方式呈现，具体取决于应用于其的样式。 根据z顺序，透明度，溢出，定位等因素，节点可能重叠或者被其它节点重叠。
这与引擎盖下的工作方式大致相同。 WebKit将每个DOM节点映射到相应的RenderObject ， RenderObject具有绘制单个DOM节点所需的所有信息。 每个RenderObject都映射到它自己的或者祖先的RenderLayer ，这是一个处理节点如何“分层”的概念方式 – 可以在其他节点上进行绘制。
为了渲染一个网页，每个RenderLayer都是通过z顺序从后到前绘制的。 那层后面的孩子是先画的，后面是画面本身，后面是孩子。 为了绘制自己， RenderLayer在相应的RenderObject上调用paint方法。
WebKit有两条渲染给定RenderLayer代码path：软件path和硬件加速path。 软件path将每个RenderObject直接绘制到您在浏览器中看到的渲染网页的图像，而硬件path允许将某些RenderLayer指定为合成图层 ，这意味着它和它的子节点分别绘制并最终合成为GPU的单个图像。 当一个页面上的一个或多个RenderLayer需要硬件加速时，或者当浏览器中的某个标志（如Chrome）明确要求时，硬件path就会被使用。
更新网页的一部分
当animation或其他事件改变页面的部分外观时，您不希望重新绘制整个网页。 相反，WebKit在改变的区域周围画一个盒子 – 损坏矩形 – 只重绘每个RenderLayer与盒子重叠的位。 不重叠损坏矩形的RenderLayer被完全跳过。
如果您通过软件path进行渲染，则WebKit直接将损坏matrix重新组合到完整渲染页面的位图图像上，而保持图像的其余部分不变。 然而，硬件path分别重新绘制每个合成图层，并将它们重新组合成新的图像。
出了什么问题
translateZ修补程序将三维变换应用于元素。 这迫使描绘球的RenderLayer需要硬件加速，这意味着WebKit将使用硬件path而不是软件path。 这意味着问题与使用软件path有关。
当球被涂上时，边界半径意味着边缘是消除锯齿的。 由于与石英有关的已知问题 ，形状的边缘是反锯齿的，因此当您更改球在页面上的位置时，某些像素会落在计算的损坏矩形之外。 使用软件path，浏览器仅重绘渲染页面图像的更改区域，而不改变图像的其余部分。 落在这个区域之外的半透明像素不会被更新，这就解释了当你移动球体时留下的伪像。
相比之下，硬件path分别重绘该层（及其子层），然后重新组合页面。 上一次渲染图层时，不会留下任何“幻像像素”。
TL; DR
当WebKit使用软件渲染path时，对部分页面的更改直接作用于表示整个页面的图像。 出于性能方面的原因，WebKit只会重新绘制已经改变的图像的那些部分。 但是，当Quartz绘制一个圆angular的矩形时，它将消除边缘的边界，使得一些像素落在WebKit知道重绘的区域之外。 解决方法是强制该层通过应用3D变换来要求硬件加速，这意味着该元素与页面的其余部分分开绘制并在其后重新构build。
在所有webkit浏览器（移动和桌面）上都有类似的问题。
我清除caching和一切，之后，从来没有发生错误。 我似乎也只能看到它。 我贴在这里，得到了大量的downvotes，因为没有人遇到这个问题…
然而，ID试试，可能工作