我遇到了一些图像在其容器可见时无法呈现的问题。我在下面重现了这个问题。当片段在完整窗口中打开时,您可以通过切换复选框来重现该问题。
.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%)样式修复了问题
其他浏览器工作正常
任何人都可以解释这里发生了什么以阻止图像加载吗?我仍然无法修复网站上的实际错误,因为我无法删除该样式或包装元素。
最佳答案
已更新 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>
关于html - Chrome 图像无法呈现,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54934723/