Css Webkit动画在屏幕上留下了垃圾像素_Css_Ios_Animation_Webkit_Mobile Safari

Css Webkit动画在屏幕上留下了垃圾像素

css ios animation

Css Webkit动画在屏幕上留下了垃圾像素,css,ios,animation,webkit,mobile-safari,Css,Ios,Animation,Webkit,Mobile Safari,下面的代码将在屏幕上显示一个白色框。如果你在iPad上运行它（你也可以调整像素以在iPhone上运行），当你触摸盒子时，它会从屏幕上滑落，并在底部边缘留下白色像素的痕迹 <!DOCTYPE HTML> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <meta name="viewport" conten

下面的代码将在屏幕上显示一个白色框。如果你在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 { -webkit-transform: translateZ(0); }

这将面板放入硬件管道，从而正确地进行合成。虽然这个简单的演示可以使用，但在我真正的web应用程序中使用硬件管道会导致内存不足错误。（指激烈的、巨大的、直接的变化。）

关于如何摆脱这条线索还有其他想法吗？

我会怎么做：

```
-webkit背面可见性：隐藏
```

使用

-webkit transform:translateX（此处为左值）

//或

translate-3d（x，y，z）

，应禁用左

确保检查在父级上启用硬件加速是否会产生任何影响
还有一些简单的方法可以强制重新绘制-如果您还需要关于它们的信息，请告诉我
[*]依赖3d变换是一种黑客行为，应该谨慎使用，这是GPU和内存之间的一种折衷，在某些情况下，它可能会导致动画或内存问题（想想移动，迫使GPU在大面积上加速）
CSS
将更改
属性将是标记可提前优化的属性的正确位置。
解决方案
box阴影：0.1pxRGBA（0,0,0,0.05）；
如果您觉得框的背景色太明显，可以将其用作框阴影
或者，根据这一点（感谢提示中的评论），您可能希望尝试：

轮廓：1px实心透明；
发生什么事？我在其他地方给出了一个简短的版本。出于性能原因，WebKit仅重新绘制其认为可能已更改的页面部分。但是，iOS（7之前版本）Safari实现的边界半径抗锯齿比计算出的长方体尺寸高出几个像素。因为WebKit不知道这些像素，所以它们不会被重新绘制；相反，它们被留在后面，并在每个动画帧上累积
正如我在另一个答案中所建议的，通常的解决方案是强制该元素需要硬件加速，以便将其绘制为一个单独的层。然而，太多的小元素或几个大元素将导致大量的分片被推送到GPU，这会对性能产生明显的影响

使用
box shadow
更直接地解决了这个问题：它扩展了框的重新绘制维度，迫使WebKit重新绘制额外的像素。在移动浏览器中，
box shadow
的已知性能影响与使用的模糊半径直接相关，因此一个像素的阴影应该几乎没有影响。
您是否尝试过
-webkit backface visibility:hidden？当然是个bug。如何制作动画并不重要。这是一个老问题，但解释了原因。简言之，石英抗锯齿绘制了位于元素计算高度和宽度之外的一排半透明像素，因此它们在重新绘制和构建每个动画帧时永远不会被清除。如果你愿意，我可以建议一个不依赖硬件加速的简单修复方法？@jesmith Great！我的想法很简单，就是强迫WebKit在每个方向上增加一个像素来重新绘制额外的像素。不幸的是，我没有一台旧的iOS设备可以测试，所以你介意为我尝试一些建议吗？第一个建议：添加框阴影：0.01×rgba（0,0,0.05）到面板规则集。视觉冲击应该是最小的，但它会强制在每一条边上绘制一行额外的像素。（如果这不起作用，试着增加alpha值。）@JordanGray，效果很好。我很感激，这很有效。我没有看到性能下降。请注意，在查找您答案中的链接时，我了解到iOS 7据称已修复了潜在的quartz bug。@jesmith我看到有人在对另一个问题的评论中也观察到了同样多的问题，尽管我找不到一个好的参考链接，如果您有，我将非常感谢！顺便说一句，我冒险对WebKit源代码进行了更深入的研究，阅读了石英抗锯齿技术，看看是否可以进一步缩小范围，但我还没有达到可以给出自信和准确解释的程度。我已经在使用方块阴影，但另一个窍门帮了我：多亏了这篇文章：我正在使用outline:1px固体透明这就像一个符咒@塞巴斯蒂安：这很简洁，谢谢你的提醒！我认为，outline 可能有效，但从未抽出时间来测试它。也许我应该更新我的答案以链接到那个解决方案。哦，我的上帝。这太神奇了。谢谢大家!<代码>-webkit背面可见性：隐藏效果非常好！非常感谢。多亏了这一次，我从朋友那里买了一杯芒果奶茶。英雄联盟 .panel { -webkit-transform: translateZ(0); }