Почему исчезает меню?

Question

[Анатолий]

Использую многоколоночное меню, с форматированием column-span.

На сайте [домен скрыт] есть меню отформатированное column-span, при клике на первый элемент меню, а именно "Регистрация ИП", все меню исчезает.
CSS:

.knowledge_base {  column-width: 320px;  column-gap: 5px; }
.knowledge h3 { column-span: all; }

Если закомментировать строку .knowledge h3 { column-span: all; } то ничего не исчезает, но форматирования - нет.

Вопрос, что я делаю не так и как это поправить?

Answer 1

[Ольга Свистунова]

Хром добавляет для ссылок outline при состоянии :focus, поэтому добавьте:

main.main ul ul a {
    text-decoration: underline;
    color: #008a0c;
    font-family: "Noto Sans", "Arial";
    outline: none;
}

И будет вам счастье.

Comments

[Анатолий]

Спасибо. Подскажите, а где можно по этому вопросу почитать, а то решение для меня не много не понятное.

PS. Что собственно происходит? ))

[Froggyweb]

в dev tools выключить галку стили браузера

[Анатолий]

Froggyweb, это мне каждому посетителю говорить?

[Froggyweb]

Анатолий, причем здесь посетитель? у каждого браузера есть свои стили по умолчанию.
т.е. пользователи Opera Efge, Samsung Browser и далее по списку

[Ольга Свистунова]

У меня решение было чисто интуитивное, потому что браузеры часто при изменении состояния элементов могут считать что-нибудь не так. Особенно если использовать методы без полной поддержки... Отключение outline у меня в фаворитах, можно сказать.

Вообще, давайте по научному :) откроем https://caniuse.com/#feat=multicolumn и почитаем про хром:

Chrome is reported to incorrectly calculate the container height, and often breaks on margins, padding, and can display 1px of the next column at the bottom of the previous column. Part of these issues can be solved by adding -webkit-perspective:1; to the column container. This creates a new stacking context for the container, and apparently causes chrome to (re)calculate column layout.

Видим, что у Хрома действительно проблемы с расчетами в даном случае. И действительно, если вынести колонки в отдельные слои, то тоже будет работать (хотя у ссылки outline будет проявляться, если его по моему первому решению не отключить)

.sub-menu {
    padding-left: 20px;
    -webkit-perspective: 1;
    perspective: 1;
}

[Анатолий]

Ольга Свистунова,