Amphtml: Stories images w/ transparency rendering a white background while loading

[cpauwels]

What's the issue?

Images with transparency (pngs, svgs, webps and gifs) render a white background while being loaded. This is especially noticeable on slow connections, and disables the ability to see any content behind the image until is has loaded.

Example:

Link

In this case, there is a full-page png with transparency (to create noise on the background), and the beer bottles are also transparent pngs

How do we reproduce the issue?

Add a transparent image to a story page, and load the story simulating a slow connection.

What browsers are affected?

Tested in Chrome and Firefox, both are not working so assuming Safari has the same issue

Which AMP version is affected?

This has been an issue for the past few months, but it used to work before. Could be due to the new image loading animation that was launched a few months ago.

[newmuis]

@cpauwels which operating system was this on?

[cpauwels]

@newmuis Tested on macOS, but the issue is also present on Chrome and Firefox for Android.

[cpauwels]

@Enriqe @gmajoulet @newmuis Any updates on this? This issue is still present on all our stories that include transparent images.

[gmajoulet]

@ampproject/wg-ui-and-a11y does anyone know if this a known AMP issue, or if it is a Story bug?

cc @ampproject/wg-stories

[MaxBittker]

the same img tag does not have this behavior outside of the amp document, so I don't think it's srcset or decoding="async"

https://codepen.io/MaxBittker/full/eYJZvgZ

[MaxBittker]

I'm suspicious of this line, but changed it to red and haven't been able to catch it flashing red yet
https://github.com/ampproject/amphtml/blob/071d69297a3b067663b8e032755945c5cb4fa90c/extensions/amp-loader/0.1/amp-loader.css#L70-L72

[gmajoulet]

For context, if it helps: https://github.com/ampproject/amphtml/issues/24609

[MaxBittker]

changing this background color to transparent resolves this issue:
(not sure if it's the right fix yet, but that's definitely the problem)

https://github.com/ampproject/amphtml/blob/071d69297a3b067663b8e032755945c5cb4fa90c/extensions/amp-loader/0.1/amp-loader.css#L26

[gmajoulet]

Can we start by writing some CSS to hide this placeholder, like https://github.com/ampproject/amphtml/pull/24895?
Then we should try to see whether we can not load the amp-loader at all, like https://github.com/ampproject/amphtml/pull/26287

[newmuis]

Yeah I would love if we just completely didn't have any AMP loaders for stories.

/cc @ampproject/wg-ui-and-a11y @ampproject/wg-stories

[MaxBittker]

amp-story .i-amphtml-loader-background {
  display: none !important;
}

resolves the issue for me if placed inside amp-loader.css, but not inside of ampdoc.css.

[MaxBittker]

nevermind, it's just that ampdoc.css didn't trigger a rebuild :)