Коробка Тень исчезает на div, когда удаляются элементы списка внутри

Чтобы проверить или увидеть ошибку:

(Примечание: ошибка была реплицирована по ссылке в Second Update, так как вопрос был впервые опубликован)

перейти к sukritchhabra.com/importr
Введите Bootstrap в строке поиска.
Выберите bootstrap из предложенного списка (Примечание. Если вы не выберите из списка, а нажмите клавишу ввода в окне поиска, страница сломается, и вам нужно будет обновиться).
После загрузки Bootstrap нажмите зеленую кнопку 6-7 раз (пока не появится полоса прокрутки)
Теперь удалите несколько из них, и тень окна исчезнет.

Я пробовал пару вещей до сих пор. Пробовал регистрировать свойство box-shadow .importrLinks после каждого удаления, чтобы поймать, где он изменяется, но никаких изменений на самом деле не происходит.

Также попытался явно назначить box-shadow после каждого удаления, и это тоже не помогает.

Во время поиска решения многие из похожих ошибок были вызваны индексом z, но я попытался назначить пользовательский z-index, и это не помогло (хотя я по-прежнему считаю, что это то, что я не тестировал полностью так как я назначал случайный, т.е. изменяя все выше и ниже z-индекс только для обнаружения изменений).

UPDATE

Как было предложено в комментариях, я должен был предоставить образец кода вместо полного веб-сайта, и я согласен. Но, как я уже упоминал в комментариях, я не смог воспроизвести ошибку на скрипке.

Тем не менее, вот ссылка на jsfiddle: https://jsfiddle.net/sukritchhabra/d3xfyc6t/5/

Ошибка все еще не происходит в скрипке, но все еще присутствует на веб-сайте. Код, который я использовал для создания скрипки, выбирается с веб-сайта. Вместо того, чтобы получать аргументы для функции addLink, я просто передал постоянные строки для тестирования.

Второе обновление (репликация ошибок)

Выяснено, что ошибка происходит, потому что контейнер имеет float: left;. Изменили его на скрипке и ошибка теперь воспроизведена на этой скрипке.

Ссылка на скрипку: https://jsfiddle.net/sukritchhabra/d3xfyc6t/6/

Третье обновление (проблема с ОС?)

Я работал над Mac до сих пор. Я просто протестировал его на компьютере с Windows, и ошибка, похоже, была только на Mac. Я не уверен на 100%, если это основная причина, но я обязательно буду тестировать ее на других машинах, чтобы быть уверенным.

Между тем, если кто-нибудь может увидеть ошибку на Mac, а не Windows, пожалуйста, дайте мне знать здесь.

Ответ 1

Подтвердил ошибку в Chrome на OS X на вашей скрипке. Я проверил и, похоже, что-то похожее на другие свойства CSS, а не только на box-shadow. Например, если установлено, border влияет одинаково и исчезает при удалении элементов. Я думаю, что это как-то связано с комбинацией свойств CSS в контейнере, когда overflow установлен в auto. Так, например, я заметил, что если вы удалите float: left, box-shadow перестанет исчезать. Так что для меня это проблема с браузером, я не уверен, почему это происходит только на OS X.

В любом случае, если вам нужно сохранить CSS точно так, как есть, вот решение, которое далеко не изящно, но оно работает:

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

Он включает в себя выполнение перерисовки браузера в контейнере при каждом удалении элемента:

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

Эта техника взята здесь:

fooobar.com/questions/30553/...

Ответ 2

Как ни странно, если вы удаляете float на контейнере DIV, он исправляет проблему: https://jsfiddle.net/d3xfyc6t/10/

Вы также должны добавить префикс поставщика коробки-тени для других браузеров:

box-shadow: 0 0 10px 1px #e2e2e2;
-moz-box-shadow: 0 0 10px 1px #e2e2e2;
-webkit-box-shadow: 0 0 10px 1px #e2e2e2;

Изменить: Смикшировать левый поплавок, заменив float: left на position: absolute; left:0;, это избавит вас от проблемы. Вам также может потребоваться установить любые внешние контейнеры, содержащие код, который вы отправили, в position: relative; https://jsfiddle.net/d3xfyc6t/11/