[GitHub] [incubator-pagespeed-mod] westonruter opened a new issue #2067: Image dimensions are erroneously supplied to amp-img>img elements

[GitBox]

westonruter opened a new issue #2067:
URL: https://github.com/apache/incubator-pagespeed-mod/issues/2067


   A user of the AMP plugin for WordPress [reported an 
issue](https://wordpress.org/support/topic/featured-image-disappeared-after-update/)
 with images on an AMP page where the server-side rendered `img` in the 
`amp-img` light shadow DOM was getting a `width` and `height` attribute 
supplied:
   
   ```html
   <amp-img width="150" height="150" src="https://www.example.com/150x150.jpeg"; 
class="attachment-thumbnail size-thumbnail wp-post-image amp-wp-enforced-sizes 
i-amphtml-layout-intrinsic i-amphtml-layout-size-defined i-amphtml-element 
i-amphtml-built i-amphtml-layout" alt="" data-hero-candidate="" 
layout="intrinsic" disable-inline-width="" i-amphtml-layout="intrinsic" 
data-hero="" i-amphtml-ssr="" i-amphtml-auto-lightbox-visited="">
       <i-amphtml-sizer class="i-amphtml-sizer" slot="i-amphtml-svc"><img 
alt="" aria-hidden="true" class="i-amphtml-intrinsic-sizer" role="presentation" 
src="data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjE1MCIgd2lkdGg9IjE1MCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2ZXJzaW9uPSIxLjEiLz4="></i-amphtml-sizer>
       <img width="150" height="150" class="i-amphtml-fill-content 
i-amphtml-replaced-content" decoding="async" loading="lazy" alt="" 
src="https://www.example.com/150x150.jpeg"; data-hero-candidate="" data-hero="">
   </amp-img>
   ```
   
   The `img` inside of an `amp-img` gets `position:absolute` and stretches to 
fill its container element, so the `width` and `height` are irrelevant. Since 
the attributes are not expected, they cause AMP validation errors and the [AMP 
base 
stylesheet](https://github.com/ampproject/amphtml/blob/521db8c3712c8c7febee42d418947c2200e05bb2/css/ampshared.css#L285-L288)
 inadvertently gives the `img` a `position:relative` styling, which causes the 
image to be hidden by being positioned outside of the parent's overflow.
   
   All this to say, when an `img` is the child of `amp-img` it should be 
skipped from having its `width` and `height` supplied.


-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

For queries about this service, please contact Infrastructure at:
us...@infra.apache.org