Blurry placeholders hides ssr'd hero images #32387
Description
I was wondering why blurry placeholders delay rendering ssr'd hero images. Turns out, placeholder images hide server-side rendered images on load as they define z-index: 1;.
.i-amphtml-layout-size-defined>[placeholder] {
position: absolute!important;
top: 0!important;
left: 0!important;
right: 0!important;
bottom: 0!important;
z-index: 1;
}
Is the z-index really needed here?
Example: https://toolbox-optimizer.glitch.me/blurry-hero.html
<amp-img src="https://unsplash.it/640/480.jpg" width="640" height="480" layout="intrinsic" data-hero="" i-amphtml-ssr="" class="i-amphtml-layout-intrinsic i-amphtml-layout-size-defined" i-amphtml-layout="intrinsic" noloading="">
<i-amphtml-sizer class="i-amphtml-sizer">
<img alt="" aria-hidden="true" class="i-amphtml-intrinsic-sizer" role="presentation" src="data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjQ4MCIgd2lkdGg9IjY0MCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2ZXJzaW9uPSIxLjEiLz4="></i-amphtml-sizer>
<img class="i-amphtml-blurry-placeholder" placeholder="" src="data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http%3A//www.w3.org/2000/svg' xmlns%3Axlink='http%3A//www.w3.org/1999/xlink' viewBox='0 0 9 7'%3E%3Cfilter id='b' color-interpolation-filters='sRGB'%3E%3CfeGaussianBlur stdDeviation='.5'%3E%3C/feGaussianBlur%3E%3CfeComponentTransfer%3E%3CfeFuncA type='discrete' tableValues='1 1'%3E%3C/feFuncA%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Cimage filter='url(%23b)' x='0' y='0' height='100%25' width='100%25' xlink%3Ahref='data%3Aimage/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAHCAYAAADam2dgAAAA70lEQVR4AQXBu0rDUACA4T/hJNYKFi8YLbhI56LvUHUQcawERMXB53F1cxcHcRRxlLooOimkFWLVUJKStLnnHL9Pe/jzlYFiwQBdgUIjqyRC16mUpCoLxO3VBbLK8bwAy1pmo9WiZs6SpxNkEVEWOSKYjjANg2keMVdfobnahFJjkI5Jy4rhcIywD2xUKXl86tHp7PDrh6jcY62xRN1a5/7uEhHGMUma8PLcI3EHREnMTxjx/fnFyfkx+3u7iFEYkmcZ7a0279c3yCJm87DL6VEXUEjnFSHigKqQ+P0+22c25kwNmU5wXYfG/CLO2wf/O+F28iKls2IAAAAASUVORK5CYII='%3E%3C/image%3E%3C/svg%3E" alt="">
<img class="i-amphtml-fill-content i-amphtml-replaced-content" decoding="async" src="https://unsplash.it/640/480.jpg">
</amp-img>//cc @jridgewell