css – Webkit动画将垃圾像素留在屏幕上

以下代码在屏幕上放置一个白色框。如果你在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>

获取bug的关键是使用边界半径，并做动画。如果你只是弹出它的屏幕，没有踪迹。如果没有边界半径，没有轨迹。

这里是我发现到目前为止的工作：

.panel.hide { -webkit-border-radius: 0; }

丑陋，并不真正实用的我的应用程序，因为我动画的面板进出，我真的想要的圆角，当它在屏幕上。

另一个：

.panel { -webkit-transform: translateZ(0); }

这使面板进入硬件流水线，这正确地合成。虽然这与这个简单的演示，使用硬件流水线在我真正的网络应用程序造成内存不足的错误。 (剧烈，巨大，直接的品种。)

任何其他的想法，我怎么可能摆脱这条路？

解决方法

解决方案

box-shadow: 0 0 1px rgba(0,0.05);

你可以使用你的框的背景颜色作为框阴影颜色，如果你觉得这太可观了。

或者，根据这answer on a similar issue in Chrome(感谢Sebastian在评论的提示)，你可能想尝试：

outline: 1px solid transparent;

这是怎么回事？

我在其他地方给了一个fairly lengthy explanation，但这里是短版本。出于性能原因，WebKit仅重新绘制它认为可能已更改的页面的那些部分。但是，iOS(pre-7)Safari实现的边框半径反锯齿几个像素超过一个盒子的计算尺寸。由于WebKit不知道这些像素，他们不会重绘;相反，它们被留下并且在每个动画帧上建立。

正如我在其他答案中建议的那样，通常的解决方案是强制该元素需要硬件加速，以使其被绘制为单独的层。然而，太多的小元素或几个大的元素将导致很多瓷砖被推送到GPU，具有明显的性能影响。

使用box-shadow更直接地解决问题：它扩展了框的重绘尺寸，迫使WebKit重新绘制额外的像素。盒子阴影在移动浏览器中的已知性能影响与所使用的模糊半径直接相关，因此一个像素阴影应该具有很少到没有效果。

css – Webkit动画将垃圾像素留在屏幕上

解决方法

相关推荐