🖍 Fix displaying hero images over blurry image placeholder (#35759)

* Fix displaying hero images over blurry image placeholder This is a second attempt at fixing #32387. The first attempt improperly used `.i-amphtml-ssr` (a class selector), when it should have been `[i-amphtml-ssr]` (a property selector). * Update z-index doc
ampproject · Aug 31, 2021 · 11a2daa · 11a2daa
1 parent b19d296
commit 11a2daa
Show file tree

Hide file tree

Showing 2 changed files with 2 additions and 2 deletions.
diff --git a/css/Z_INDEX.md b/css/Z_INDEX.md
@@ -4,7 +4,7 @@
 
 | context                                                                                                   | z-index    | file                                                                                                                                                                    |
 | --------------------------------------------------------------------------------------------------------- | ---------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `amp-img.i-amphtml-ssr:not(.i-amphtml-element) > [placeholder]`                                           | auto       | [css/ampshared.css](/css/ampshared.css)                                                                                                                                 |
+| `amp-img[i-amphtml-ssr]:not(.i-amphtml-element) > [placeholder]`                                          | auto       | [css/ampshared.css](/css/ampshared.css)                                                                                                                                 |
 | `.i-amphtml-expanded-mode amp-story-grid-layer`                                                           | auto       | [extensions/amp-story/1.0/amp-story.css](/extensions/amp-story/1.0/amp-story.css)                                                                                       |
 | `.i-amphtml-expanded-mode amp-story-grid-layer *`                                                         | auto       | [extensions/amp-story/1.0/amp-story.css](/extensions/amp-story/1.0/amp-story.css)                                                                                       |
 | `amp-sidebar::part(c)`                                                                                    | inherit    | [extensions/amp-sidebar/1.0/amp-sidebar.css](/extensions/amp-sidebar/1.0/amp-sidebar.css)                                                                               |

diff --git a/css/ampshared.css b/css/ampshared.css
@@ -367,7 +367,7 @@ amp-img:not(.i-amphtml-element)[i-amphtml-ssr] > img.i-amphtml-fill-content
    rendered by the server and are not (yet) controlled by JS to speed up
    display of the real image. This conveniently also fixes the display of
    the image when JS fails to load. */
-amp-img.i-amphtml-ssr:not(.i-amphtml-element) > [placeholder] {
+amp-img[i-amphtml-ssr]:not(.i-amphtml-element) > [placeholder] {
   z-index: auto;
 }