Изображение не отображается, когда css-фильтр применен с родительским переходом

Question 1

У меня странная ошибка в браузере Edge.

Сценарий

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

Проблема

Когда родительский контейнер опускается, он отображает изображение только частично. На моем действующем сайте он может загружать от 10% до 90% изображения, так как раскрывающийся список намного длиннее, и эти изображения находятся внизу, однако в моем примере ниже он отображает только самый верх изображения, поэтому вы может только разглядеть верх изображения.

Проблема устраняется путем удаления transition из родительского контейнера или путем удаления filter из изображения. Похоже, что обе эти вещи вместе вызывают проблему.

Живой пример (скрипка и фрагмент)

JSFiddle

html, body {
  height: 100%;
  width: 100%;
}

body {
  background: grey;
}

body:hover .sfHeader-companiesLinks {
  max-height: 200px;
}

.sfHeader-companiesLinks {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: distribute;
  -webkit-justify-content: space-around;
  -moz-justify-content: space-around;
  justify-content: space-around;
  height: 50px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s cubic-bezier(0.17, 0.04, 0.03, 0.94)
}

.sfHeader-companiesLink {
  -webkit-box-flex: 1;
  -webkit-flex: 1 0 0px;
  -moz-box-flex: 1;
  -moz-flex: 1 0 0px;
  -ms-flex: 1 0 0px;
  flex: 1 0 0px;
  -webkit-filter: grayscale(100%) invert(100%) drop-shadow(0 0 5px rgba(41, 41, 44, 0.5));
  filter: grayscale(100%) invert(100%) drop-shadow(0 0 5px rgba(41, 41, 44, 0.5));
  background-repeat: no-repeat;
  background-size: 100% 100%;
  height: 50px;
  max-width: 150px;
  text-align: center;
}

.sfHeader-companiesLink:hover,
.sfHeader-companiesLink:active,
.sfHeader-companiesLink:focus {
  -webkit-filter: unset;
  filter: unset;
}

<p>Hover over the body</p>
<div class="sfHeader-companiesLinks">
  <a class="sfHeader-companiesLink" style="background-image:url(https://upload.wikimedia.org/wikipedia/commons/1/1a/Arthur%2C_the_cat.jpg);" href="/features/listing-management/ebay"></a>

  <a class="sfHeader-companiesLink" style="background-image:url(https://upload.wikimedia.org/wikipedia/commons/1/1a/Arthur%2C_the_cat.jpg);" href="/features/listing-management/amazon"></a>

  <a class="sfHeader-companiesLink" style="background-image:url(https://upload.wikimedia.org/wikipedia/commons/1/1a/Arthur%2C_the_cat.jpg);" href="/features/listing-management/magento"></a>
</div>

Вещи пробовали (и потерпели неудачу)

Создание изображения элементом img вместо фонового изображения
Фильтр применяется только при зависании тела

Проблема отдыха

Я понимаю, что, возможно, те, кто работает на ОС с фруктовым вкусом, не могут воспроизвести, поэтому я создал анимированный GIF-файл проблемы:

GIF of the issue

Вывод

Я ищу обходной путь, позволяющий сохранить эту функциональность. Все безумные предложения будут приняты во внимание! Я прекрасно понимаю, что фильтр в IE11 все равно не работает. Кажется, работает правильно как в Chrome, так и в Firefox. Спасибо.

html css css-transitions microsoft-edge

2

Jamie Barker 5 Янв 2017 в 14:06

Answer

В конце концов, эта функциональность была удалена, однако команда Microsoft Edge теперь занимается этим:

https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/10423235/

0

Jamie Barker 23 Фев 2017 в 13:22

Question 2