Box Shadow disappearing on a div, when deleting list elements inside it

Question

To test or see the bug:

(Note: Bug has been replicated on the link in Second Update, since the question was first posted)

• go to sukritchhabra.com/importr
• Type Bootstrap in the search bar.
• Select bootstrap from the suggested list (Note: If you do not select from the list but press enter in the search box, the page will break and you'll have to refresh)
• Once Bootstrap loads, press the green button 6-7 times (until a scroll bar appears)
• Now delete a few of them, and the box-shadow will disappear.

I've tried a couple of things so far. Tried logging the box-shadow property of .importrLinks after every delete to catch where it is changing but no change is actually happening.

Also tried explicitly assigning box-shadow after each delete, and that doesn't help either.

During my search for a solution, alot of somewhat similar bugs were because of the z-index but I tried assigning custom z-index's and that didn't help (although I still believe this is something I haven't tested completely since I was assigning random, i.e., altering higher and lower, z-index's just to detect changes).

UPDATE

As suggested in the comments, I should've provided sample code instead of the complete website and I agree. But, as I have mentioned in the comments, I wasn't able to replicate the bug, on a fiddle.

Nevertheless, here is a link to the jsfiddle: https://jsfiddle.net/sukritchhabra/d3xfyc6t/5/

The bug still doesn't take place in the fiddle but, is still there on the website. The code I've used to create the fiddle is picked from the website. Instead of getting arguments for the addLink function, I've just passed constant strings for testing.

Second Update (Bug Replicated)

Figured out the bug is happening because the container has a float: left;. Have changed it on the fiddle and the bug is now replicated on this fiddle.

Link to fiddle: https://jsfiddle.net/sukritchhabra/d3xfyc6t/6/

Third Update (OS issue?)

I had been working on a Mac so far. I just tested it on a Windows machine, and the bug seems to be only on Mac. Am not a 100% sure if that is the root cause, but I'll definitely be testing it on other machines just to be sure.

Meanwhile, if anybody can see the bug on a Mac and not Windows, please do let me know here.

Answer 1

Confirmed the bug in Chrome on OS X on your fiddle. I checked and the same seems to happen to other CSS properties, not just box-shadow. For example, if set, border is affected in the same way and disappears when you remove items. I think it's got something to do with the combination of CSS properties on the container when overflow is set to auto. So for example I noticed that if you remove float: left, box-shadow stops disappearing. So to me it seems to be a browser rendering issue, I'm not sure why it's happening only on OS X.

Anyway, if you need to keep CSS exactly as it is, here is a solution that is far from elegant, but it works:

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

It involves doing a browser repaint on the container every time you remove an element:

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

This technique is taken from here:

https://stackoverflow.com/a/8840703