Jos*_*ith 35 css animation webkit mobile-safari ios
以下代码在屏幕上显示一个白色框.如果你在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应用程序中使用硬件管道会导致内存不足错误.(急剧的,巨大的,直接的变种.)
关于如何摆脱这条线索的任何其他想法？
Jor*_*ray 58
box-shadow: 0 0 1px rgba(0, 0, 0, 0.05);
box-shadow如果您觉得太明显,可以使用盒子的背景颜色作为颜色.
或者,根据这个答案,Chrome中的类似问题(感谢塞巴斯蒂安在评论提示中),您可能想尝试:
outline: 1px solid transparent;
我在其他地方给出了相当冗长的解释,但这是简短的版本.出于性能原因,WebKit仅重新绘制它认为可能已更改的页面部分.但是,iOS(pre-7)Safari实现的边框半径消除了超出计算尺寸的一些像素的几个像素.由于WebKit不了解这些像素,因此不会重新绘制; 相反,它们被留下并在每个动画帧上构建.
正如我在其他答案中所建议的那样,通常的解决方案是强制该元素需要硬件加速,以便将其绘制为单独的图层.但是,太多的小元素或一些大的元素会导致很多磁贴被推到GPU上,这会带来明显的性能影响.
使用box-shadow更直接地解决问题:它扩展了框的重绘尺寸,迫使WebKit重新绘制额外的像素.box-shadow移动浏览器中已知的性能影响与使用的模糊半径直接相关,因此一个像素阴影应该具有很小的影响.
我会怎么做:
-webkit-backface-visibility: hidden-webkit-transform:translateX(left value here)//或translate-3d(x,y,z),左应禁用 [*]请务必检查在父级上启用硬件加速是否有所不同.
还有一些简单的方法可以强制重新绘制 - 如果您需要有关它们的信息,请告诉我.
[*]依赖于3d变换是一种破解,应该谨慎使用,它是GPU和内存之间的权衡,在某些情况下,它可能会导致动画抖动或内存问题(想想 - 移动,强制大面积GPU加速).
CSS will-change属性将是标记可以提前优化的属性的正确位置.
| 归档时间： |
|
| 查看次数： |
14643 次 |
| 最近记录： |