Chrome 图片渲染失败

Question

我遇到了一些图像在其容器可见时无法呈现的问题。我在下面重现了这个问题。当片段以完整 window 打开时，您可以通过切换复选框来重现该问题。

.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%) 样式修复了问题
其他浏览器工作正常

任何人都可以解释这里发生了什么以阻止图像加载吗？我仍然无法修复我网站上的实际错误，因为我无法删除该样式或包装元素。

Answer 1

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>

Chrome 图片渲染失败

Chrome image fails to render

html

css

chromium

css-filters