Как убрать глюк в IE и Edge?

Question

[kkoshakk]

При запуске в фидле Run в IE происходит сдвиг влево на 15 px Logo, это только в ie, edge, в хроме и опере все норм. Я выяснил, что это происходит из-за того-что в бутстраповских стилях есть:

@media (min-width: 768px) {
  .navbar > .container .navbar-brand,
  .navbar > .container-fluid .navbar-brand {
    margin-left: -15px;
  }
}

Получается, что transition:all влияет на margin-left: -15px; в navbar-brand, но ПОЧЕМУ, если я указываю transition для селектора a????
https://jsfiddle.net/kkoshakk/tr3e2rd5/7/

Comments

[Сергей]

А если присвоить класс попробовать?

[DTX]

В Edge у мегя всё норм

[kkoshakk]

DTX: растяни, что бы полный навбар был с формой поиска и нажми Run

[kkoshakk]

Сергей: куда присвоить?

Answer 1

[DTX]

1) В хроме такой же баг
https://jsfiddle.net/tr3e2rd5/8/

2)

Получается, что transition:all влияет на margin-left: -15px; в navbar-brand, но ПОЧЕМУ, если я указываю transition для селектора a????

Так у тебя у А есть класс .navbar-brand :)
<a class="navbar-brand" href="#">Logo</a>

Comments

[kkoshakk]

В хроме такого бага нету, я знаю, что есть класс .navbar-brand, как сделать, что бы transition не срабатывал на навбаре?

[DTX]

kkoshakk: Какого бага? Всё работает согласно стилям. Или у вас в IE финальная картина отличается?

Можно так:
.navbar-brand {
transition: none;
}

Можно так:
a:not(.navbar-brand) {
transition: all 0.2s;
}