Box Shadow исчезает на div, при удалении элементов списка внутри него

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

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

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

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

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

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

ОБНОВИТЬ

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

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

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

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

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

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

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

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

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

Источник

2 ответа

Подтвердил ошибку в 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);

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

/questions/29998656/prinuditelnaya-pererisovka-obnovlenie-dom-na-chromemac/29998675#29998675

Источник

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

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

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/

Источник
Другие вопросы по тегам