Полная ширина Bootstrap dropdown nav - Не работает в Safari

Question

Я искал способ отображения «dropdown nav» с полной шириной, и, к счастью, я нашел topic, ответил Басс Джобс.

К сожалению, я идентифицировал одну проблему совместимости с браузером Safari. Как вы можете видеть на рисунке ниже, когда я удаляю мышь из ссылки меню, выпадающий навигатор остается там, как «призрачный навигатор».

Эта ошибка происходит только в Safari браузеры и, кажется, относится к свойству «позиции: статический», как вы можете убедиться в Bootply.

Пожалуйста, может кто-нибудь помочь мне решить эту проблему?

Answer 1

У Chrome нет проблемы, но я нашел, что другие браузеры webkit (проверенные с помощью reqq) действительно имеют проблему, описанную выше.

Насколько я понимаю этот вопрос происходит следующее:

при удалении open класс от .nav > li.dropdown своих детей получили: position: relative (родитель) display:hidden. Площадь предыдущего меньше, чем ширина position: static (родительская) display:block.

Таким образом, при переключении между открытым/не открытым Webkit скрывает только position: relative (родительский) display:hidden.

Решение применить position: static как на ситуацию с и без open класса:

.nav > li.dropdown { position: static; } 
.nav > li.dropdown.open .dropdown-menu {display:table; width: 100%; text-align: center; left:0; right:0; } 
.dropdown-menu>li { display: table-cell; } 

Так используйте nav > li.dropdown { position: static; } вместо nav > li.dropdown.open { position: static; }