当删除其中的列表元素时,Box Shadow会消失在div上

Question

要测试或看到错误:

(注意:Bug已在第二次更新中的链接上复制,因为问题是第一次发布的)

• 去sukritchhabra.com/importr
• 在搜索栏中键入Bootstrap.
• 从建议列表中选择引导程序(注意:如果您没有从列表中选择但在搜索框中按Enter键,页面将中断,您将不得不刷新)
• 加载Bootstrap后,按绿色按钮6-7次(直到出现滚动条)
• 现在删除它们中的一些,并且盒子阴影将消失.

到目前为止,我已经尝试了几件事.尝试记录.importrLinks每次删除后的box-shadow属性以捕获它正在发生变化但实际上没有发生变化.

还尝试在每次删除后明确指定box-shadow,这也无济于事.

在我寻找解决方案期间,由于z-index而有很多类似的错误,但我尝试分配自定义z-index并且没有帮助(尽管我仍然相信这是我没有完全测试过的,因为我是分配随机,即改变更高和更低的z-index只是为了检测变化).

UPDATE

正如评论中所建议的那样,我应该提供示例代码而不是完整的网站,我同意.但是,正如我在评论中提到的那样,我无法在小提琴上复制这个错误.

不过,这里有一个链接到jsfiddle:https://jsfiddle.net/sukritchhabra/d3xfyc6t/5/

该错误仍然不会发生在小提琴中,但仍然存在于网站上.我用来创建小提琴的代码是从网站上挑选出来的.我没有为addLink函数获取参数,而是通过常量字符串进行测试.

第二次更新(Bug Replicated)

弄清楚错误正在发生,因为容器有一个float: left;.在小提琴上改变了它,现在这个小提琴就被复制了.

链接到小提琴:https://jsfiddle.net/sukritchhabra/d3xfyc6t/6/

第三次更新(操作系统问题？)

到目前为止,我一直在Mac上工作.我刚刚在Windows机器上测试过它,这个bug似乎只在Mac上.如果这是根本原因,我不是100%确定,但我肯定会在其他机器上进行测试以确定.

同时,如果有人可以在Mac而不是Windows上看到该错误,请在此告诉我.

Answer 1

在你的小提琴上确认了 OS X 上 Chrome 中的错误。我检查了一下，其他 CSS 属性似乎也发生了同样的情况，而不仅仅是box-shadow. 例如，如果设置，border则会以相同的方式受到影响，并在您删除项目时消失。overflow我认为这与设置为 时容器上的 CSS 属性组合有关auto。例如，我注意到如果删除float: left,box-shadow就会停止消失。所以对我来说这似乎是一个浏览器渲染问题，我不确定为什么它只发生在 OS X 上。

不管怎样，如果你需要保持CSS原样，这里有一个远非优雅的解决方案，但它有效：

https://jsfiddle.net/d3xfyc6t/8/

它涉及每次删除元素时在容器上进行浏览器重绘：

$('.importrLinks').hide().show(0);

该技术取自此处：

/sf/answers/618849241/