小编Mat*_*che的帖子
Chrome v41 +性能问题与display:none; 在许多节点上
我最近注意到Chrome应用于display: none;大量节点时:
在上面的CodePen中,您可以看到切换display: none;1000个元素时的延迟.如果你碰到1000到3000并再次切换它,标签将完全挂起.相同的代码在Safari中没有任何延迟,并且我90%确定这在Chrome中工作正常,直到上个月左右,所以我猜这是最近的Chrome bug.有没有其他人遇到这个并找到了解决方法？(我有Web应用程序功能,可以渲染3000多个元素,用CSS隐藏它们,然后用JS按需显示它们.目前页面甚至不会加载.)
编辑:应该提到我在Chrome 41.0.2272.76和Canary 43.0.2318.0中看到了这一点.这似乎是一个出现在Chrome 41.x中的某个地方的错误,并且已被报道.
$("button.hide").on("click",function(){
$("div.wrap").toggleClass("hide");
});.wrap.hide p {
display: none;
}
button {
cursor: pointer;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class='hide'>toggle 'display: none;'</button>
<!-- * This just creates a div containing 1000 <p> tags */ -->
<div class='wrap'>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
...
<p>998</p>
<p>999</p>
<p>1000</p>
</div>7
推荐指数
推荐指数
1
解决办法
解决办法
2052
查看次数
查看次数
IE 10/11 flex 子溢出对齐的解决方法
如果 flex 容器具有 justify-content: center，并且有一个比容器宽的 flex 子元素，则内容在除 IE10 和 IE11 之外的所有浏览器中保持居中（内容在两个方向上均等溢出）。
在大多数浏览器中，您会得到：
在 IE 10/11 中，您会得到：
我需要一种方法来在那些 IE 浏览器中实现居中布局，而无需完全放弃 flexbox 方法。如有必要，我对 CSS hack IE 解决方法持开放态度。
这是示例的小提琴：
.wrap {
width: 100%;
height: 100%;
}
.layer {
display: -ms-flexbox;
display: flex;
-ms-flex-pack: center;
justify-content: center;
-ms-flex-align: center;
align-items: center;
margin: 0 auto;
width: 100px;
height: 100px;
border: 1px solid blue;
}
.layer-inner {
font-size: 20px;
width: auto;
white-space: nowrap;
line-height: 1em;
}<div class="wrap">
<div class="layer">
<span class="layer-inner">
This overlowing text should …7
推荐指数
推荐指数
1
解决办法
解决办法
2799
查看次数
查看次数
使用Javascript禁用iPhone上的"保存图像"菜单
有一个我想要阻止图像复制的摄影网站.当您在图像上按住手指时,如何禁用iPhone上弹出的保存图像菜单？
5
推荐指数
推荐指数
1
解决办法
解决办法
5839
查看次数
查看次数