以下代码在屏幕上显示一个白色框.如果你在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); }
这使得面板进入硬件管道,正确地进行合成.虽然这适用于这个简单的演示,但在我的真实Web应用程序中使用硬件管道会导致内存不足错误.(急剧的,巨大的,直接的变种.)
关于如何摆脱这条线索的任何其他想法？