Изображение Chrome не отображается

У меня возникают проблемы с некоторыми изображениями, которые не отображаются, когда их контейнер становится видимым. Я воспроизвел проблему ниже. Вы можете воспроизвести проблему, установив флажок, когда фрагмент открыт в полном окне.

.wrapper {
  max-height: 0;
  overflow: hidden;
  position: absolute;
  transition: .2s all ease-out;
  z-index: 100;
}
#checkControl:checked~ .wrapper {
  max-height: 540px;
}
.anchor {
  display: block;
}
.anchor img {
  filter: grayscale(100%);
  width: 60px;
}
<input type="checkbox" id="checkControl">
<div class="wrapper">
  <div class="problemDiv">
    <a class="anchor"> 
      <img src="https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/feed.svg" >One
    </a>
    <a class="anchor"> 
      <img src="https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/feed.svg" >Two
    </a>
    <a class="anchor"> 
      <img src="https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/feed.svg">Three
    </a>
    <a class="anchor"> 
      <img src="https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/feed.svg">Four
    </a>
    <a class="anchor"> 
      <img src="https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/feed.svg">Five
    </a>
    <a class="anchor"> 
      <img src="https://www.gstatic.com/images/icons/material/product/2x/pagespeed_64dp.png">Six
    </a>
  </div>
</div>

Предполагаемое поведение: показывать все изображения.
Фактическое поведение: отображаются только первые несколько.

Что я заметил:
Быстрое двойное нажатие на переключатель обычно загружает больше изображений
При изменении стилей в инструментах разработки загружаются изображения (даже несвязанные стили)
Щелчок и перемещение мыши по странице в конечном итоге приводит к их отображению.
Удаление элемента .problemDiv устраняет проблему
Удаление фильтра: стиль оттенков серого (100%) устраняет проблему
Другие браузеры работает нормально


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


html css chromium css-filters
person David Reing    schedule 28.02.2019    source источник
comment
Возможный дубликат Почему фильтр (drop-shadow ), из-за чего мой SVG исчезает в Safari?   -  person David Reing    schedule 01.03.2019

Ответы (1)


arrow_upward
1
arrow_downward

JSFiddle

Обновлен JSFiddle.

.wrapper {
  max-height: 0;
  overflow: hidden;
  position: absolute;
  transition: 2s all ease-out;
  z-index: 100;
}

#checkControl:checked~.wrapper {
  max-height: 540px;
}

.anchor {
  display: block;
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: grayscale(100%);
}

.anchor img {
  width: 60px;
}
<input type="checkbox" id="checkControl">
<div class="wrapper">
  <div class="problemDiv">
    <a class="anchor">
      <img src="https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/feed.svg" />One
    </a>
    <a class="anchor">
      <img src="https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/feed.svg" />Two
    </a>
    <a class="anchor">
      <img src="https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/feed.svg" />Three
    </a>
    <a class="anchor">
      <img src="https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/feed.svg" />Four
    </a>
    <a class="anchor">
      <img src="https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/feed.svg" />Five
    </a>
    <a class="anchor">
      <img src="https://www.gstatic.com/images/icons/material/product/2x/pagespeed_64dp.png" />Six
    </a>
  </div>
</div>

person Chris_00    schedule 01.03.2019
comment
Спасибо, это сработало для меня. Любая причина, по которой применение фильтра к img напрямую вызывает поведение, которое я испытывал, но применение его к тегу привязки исправило это? - person David Reing; 01.03.2019
comment
@DavidReing Я полагаю, потому что изображение должно быть в блочном контейнере, поскольку изображение не является блочным элементом. Я также обновил файл JSFiddle. - person Chris_00; 02.03.2019