Вопросы Теги

Анимация 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>

Ключом к решению проблемы является использование радиуса границы и анимация. Если вы просто столкнете его с экрана, никакого следа. Если нет границы радиуса, нет следа.

Вот обходные пути, которые я нашел до сих пор:

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

Некрасиво и не очень практично для моего приложения, потому что я анимирую панель как внутри, так и снаружи, и мне действительно нужны закругленные углы, когда это находится на экране.

Другой:

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

Это помещает панель в аппаратный конвейер, который правильно выполняет композитинг. Хотя это работает с этой простой демонстрацией, использование аппаратного конвейера в моем реальном веб-приложении вызывает ошибки нехватки памяти. (Из радикального, огромного, непосредственного разнообразия.)

Есть другие идеи, как мне избавиться от этого следа?

35
задан Joshua Smith 2 April 2012 в 20:41
поделиться