The following code puts a white box on the screen. If you run this on an iPad (you can adjust the pixels to run it on an iPhone, too), when you touch the box, it will scoot off the screen, and leave a trail of white-ish pixels along its bottom edge.
<!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>
The key to getting the bug is using a border radius, and doing animation. If you just pop it off the screen, no trail. If there is no border radius, no trail.
Here are the work-arounds I've found so far:
.panel.hide { -webkit-border-radius: 0; }
Ugly, and not really practical for my application, because I'm animating the panel both in and out, and I really want the rounded corners when it is on screen.
Another:
.panel { -webkit-transform: translateZ(0); }
That puts the panel into the hardware pipeline, which does the compositing correctly. Although this works with this simple demo, using the hardware pipeline in my real web app causes out-of-memory errors. (Of the drastic, huge, immediate variety.)
Any other ideas of how I might get rid of this trail?
See Question&Answers more detail:
os 与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
