Chrome image fails to render

Question

I'm having issues with some images failing to render when their container becomes visible. I've reproduced the issue below. You can reproduce the issue by toggling the checkbox when the snippet is opened in a full 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>

Intended behavior: All the images to show.
Actual behavior: Only shows the first few.

Things I've noticed:
Quick double clicking the toggle off then on usually loads more images
Changing styles in the dev tools will load the images (even unrelated styles)
Clicking and moving the mouse around the page eventually gets them to render
Removing the .problemDiv element fixes the issue
Removing the filter: grayscale(100%) style fixes the issue
Other broswers work fine

Can anyone explain what is happening here to prevent the images from loading? I'm still having trouble fixing the actual bug on my site since I can't remove that style or the wrapping element.

Possible duplicate of [Why is filter(drop-shadow) causing my SVG to disappear in Safari?](https://stackoverflow.com/questions/36705323/why-is-filterdrop-shadow-causing-my-svg-to-disappear-in-safari) — David Reing, Mar 01 '19 at 15:19

Chris_00 · Accepted Answer · 2019-03-02T08:53:31.030

JSFiddle

Updated 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>

Thanks this worked for me. Any reason why applying the filter to the img directly causes the behavior I was experiencing but applying it to the anchor tag fixed it? — David Reing, Mar 01 '19 at 14:42
@DavidReing I assume, because the image need to be in a block container as the image is not a block element. I also updated the JSFiddle. — Chris_00, Mar 02 '19 at 08:55

Chrome image fails to render

1 Answers1