1673618 - Image not loading instantly

Status: RESOLVED INVALID

(Core :: DOM: Core & HTML, defect, P2)

Description

[asaifm]

User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:82.0) Gecko/20100101 Firefox/82.0

Steps to reproduce:

load the website: https://dozendev.wpengine.com/

Actual results:

One of the images in the div with classes: "et_pb_section et_pb_section_2 et_section_regular" does not load
The image (url: https://dozendev.wpengine.com/wp-content/uploads/2020/09/Group-8.png) does not load unless the window is resized several times

Expected results:

The image should appear once the page is loaded

Comment 1

[Alice0775 White]

Regression window:

https://hg.mozilla.org/integration/autoland/pushloghtml?fromchange=a2e0699b6cb88cd88f1b0be00be031449a2d62fd&tochange=86d3343d25ce81ecb6715017acefe51f1e881634

Comment 2

[Alice0775 White]

Attachment: reduced.html

Comment 3

[Mirko Brodesser (:mbrodesser) -- not reading bugmails currently]

Reproducible with Nightly on Ubuntu 18.04. Works with Chrome.

:hiro: do you have time to take a closer look at the issue?

Comment 4

[Emilio Cobos Álvarez (:emilio)]

This is invalid (or a website issue really). The image is out of the viewport, and has no width / height, so it's zero-sized. So it doesn't intersect the viewport and thus we don't load it.

It might be the case that bug 1673785 fixes this drive-by, because it will slightly increase the margin horizontally and may make it just so that it's in the viewport.

But the website shouldn't rely on a particular lazyload margin. The fix on the website is changing width="auto" height="auto" (which are invalid) to use a sensible default width so that it intersects the viewport.

It just so happens that Chrome uses huge margins and the image loads there for a particular screen size.