Следующий код помещает на экран белое окно. Если вы запустите это на 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); }
Это помещает панель в аппаратный конвейер, который правильно выполняет компоновку. Хотя это работает с этой простой демонстрацией, использование аппаратного конвейера в моем реальном веб-приложении приводит к ошибкам в памяти. (Из резкого, огромного, немедленного разнообразия.)
Любые другие идеи о том, как я могу избавиться от этой тропы?
