Bugzilla

Ok, I see what's happening.

From comment #10, you see there's a resize listener. Scrolling up with scroll-to-hide-toolbar triggers resize event, and the listener is handleLazy. And from comment #9 you see that each card-gallery has two images, with the latter being hidden by `display: none` (it's for mouse hover).

handleLazy is called for both. As the first image is already loaded, the early return happens and nothing goes wrong. The culprit is in the second image. We do not load the second image at all, so `.complete` remains false. That means the early return does not happen, so handleLazy goes on and add `loading` class to its ancestor, causing both images to be hidden. Now given the first image is already loaded and the second image never loads, the load listener never runs and the loading class stays forever.

Interestingly Chrome loads the second image and has `.complete` being true, and thus is immune from this problem.

Ok, I see what's happening.

From comment #10, you see there's a resize listener. Scrolling up with scroll-to-hide-toolbar triggers resize event, and the listener is handleLazy. And from comment #9 you see that each card-gallery has two images, with the latter being hidden by `display: none` (it's for mouse hover).

handleLazy is called for both. As the first image is already loaded, the early return happens and nothing goes wrong. The culprit is in the second image. We do not load the second image at all, so `.complete` remains false. That means the early return does not happen, so handleLazy goes on and add `loading` class to its ancestor, causing both images to be hidden. Now given the first image is already loaded and the second image never loads, the load listener never runs and the loading class stays forever.

~~Interestingly Chrome loads the second image and has `.complete` being true, and thus is immune from this problem.~~

Ok, I see what's happening.

From comment #10, you see there's a resize listener. Scrolling up with scroll-to-hide-toolbar triggers resize event, and the listener is handleLazy. And from comment #9 you see that each card-gallery has two images, with the latter being hidden by `display: none` (it's for mouse hover).

handleLazy is called for both. As the first image is already loaded, the early return happens and nothing goes wrong. The culprit is in the second image. We do not load the second image at all, so `.complete` remains false. That means the early return does not happen, so handleLazy goes on and add `loading` class to its ancestor, causing both images to be hidden. Now given the first image is already loaded and the second image never loads, the load listener never runs and the loading class stays forever.

~~Interestingly Chrome loads the second image and has `.complete` being true, and thus is immune from this problem.~~ Hmm, actually no.

Ok, I see what's happening.

From comment #10, you see there's a resize listener. Scrolling up with scroll-to-hide-toolbar triggers resize event, and the listener is handleLazy. And from comment #9 you see that each card-gallery has two images, with the latter being hidden by `display: none` (it's for mouse hover).

handleLazy is called for both. As the first image is already loaded, the early return happens and nothing goes wrong. The culprit is in the second image. We do not load the second image at all, so `.complete` remains false. That means the early return does not happen, so handleLazy goes on and add `loading` class to its ancestor, causing both images to be hidden. Now given the first image is already loaded and the second image never loads, the load listener never runs and the loading class stays forever.

~~Interestingly Chrome loads the second image and has `.complete` being true, and thus is immune from this problem.~~ Hmm, actually no, at least not on desktop Chrome.

Ok, I see what's happening.

From comment #10, you see there's a resize listener. Scrolling up with scroll-to-hide-toolbar triggers resize event, and the listener is handleLazy. And from comment #9 you see that each card-gallery has multiple images, with the second being hidden by `display: none` (it's for mouse hover).

handleLazy is called for both. As the first image is already loaded, the early return happens and nothing goes wrong. The culprit is in the second image. We do not load the second image at all, so `.complete` remains false. That means the early return does not happen, so handleLazy goes on and add `loading` class to its ancestor, causing both images to be hidden. Now given the first image is already loaded and the second image never loads, the load listener never runs and the loading class stays forever.

~~Interestingly Chrome loads the second image and has `.complete` being true, and thus is immune from this problem.~~ Hmm, actually no, at least not on desktop Chrome.

Ok, I see what's happening.

From comment #10, you see there's a resize listener. Scrolling up with scroll-to-hide-toolbar triggers resize event, and the listener is handleLazy. And from comment #9 you see that each card-gallery has multiple images, with the second being hidden by `display: none` (it's for mouse hover).

handleLazy is called for both. As the first image is already loaded, the early return happens and nothing goes wrong. The culprit is in the second image. We do not load the second image at all, so `.complete` remains false. That means the early return does not happen, so handleLazy goes on and add `loading` class to its ancestor, causing both images to be hidden. Now given the first image is already loaded and the second image never loads, the load listener never runs and the loading class stays forever.

~~Interestingly Chrome loads the second image and has `.complete` being true, and thus is immune from this problem.~~ ~~ Hmm, actually no, at least not on desktop Chrome.~~ Yes, except Chrome desktop and mobile disagree with each other. 🤦🏻‍♀️

Ok, I see what's happening.

From comment #10, you see there's a resize listener. Scrolling up with scroll-to-hide-toolbar triggers resize event, and the listener is handleLazy. And from comment #9 you see that each card-gallery has multiple images, with the second being hidden by `display: none` (it's for mouse hover).

handleLazy is called for both. As the first image is already loaded, the early return happens and nothing goes wrong. The culprit is in the second image. We do not load the second image at all, so `.complete` remains false. That means the early return does not happen, so handleLazy goes on and add `loading` class to its ancestor, causing both images to be hidden. Now given the first image is already loaded and the second image never loads, the load listener never runs and the loading class stays forever.

~~Interestingly Chrome loads the second image and has `.complete` being true, and thus is immune from this problem.~~ ~~Hmm, actually no, at least not on desktop Chrome.~~ Yes, except Chrome desktop and mobile disagree with each other. 🤦🏻‍♀️

Ok, I see what's happening.

From comment #10, you see there's a resize listener. Scrolling up with scroll-to-hide-toolbar triggers resize event, and the listener is handleLazy. And from comment #9 you see that each card-gallery has multiple images, with the second being hidden by `display: none` (it's for mouse hover).

handleLazy is called for both. As the first image is already loaded, the early return happens and nothing goes wrong. The culprit is in the second image. We do not load the second image at all, so `.complete` remains false. That means the early return does not happen, so handleLazy goes on and add `loading` class to its ancestor, causing both images to be hidden. Now given the first image is already loaded and the second image never loads, the load listener never runs and the loading class stays forever.

~~Interestingly Chrome loads the second image and has `.complete` being true, and thus is immune from this problem.~~ ~~Hmm, actually no, at least not on desktop Chrome.~~ ~~Yes, except Chrome desktop and mobile disagree with each other. 🤦🏻‍♀️~~ Yes and no, Chrome desktop also shows the same issue in mobile emulation. Some user agent sniffing?

Ok, I see what's happening.

From comment #10, you see there's a resize listener. Scrolling up with scroll-to-hide-toolbar triggers resize event, and the listener is handleLazy. And from comment #9 you see that each card-gallery has multiple images, with the second being hidden by `display: none` (it's for mouse hover).

handleLazy is called for both. As the first image is already loaded, the early return happens and nothing goes wrong. The culprit is in the second image. We do not load the second image at all, so `.complete` remains false. That means the early return does not happen, so handleLazy goes on and add `loading` class to its ancestor, causing both images to be hidden. Now given the first image is already loaded and the second image never loads, the load listener never runs and the loading class stays forever.

~~Interestingly Chrome loads the second image and has `.complete` being true, and thus is immune from this problem.~~ ~~Hmm, actually no, at least not on desktop Chrome.~~ ~~Yes, except Chrome desktop and mobile disagree with each other. 🤦🏻‍♀️~~ ~~Yes and no, Chrome desktop also shows the same issue in mobile emulation. Some user agent sniffing?~~ Well the disagreement only happens for the top images, for other images `.complete` is false too.

Ok, I see what's happening.

From comment #10, you see there's a resize listener. Scrolling up with scroll-to-hide-toolbar triggers resize event, and the listener is handleLazy. And from comment #9 you see that each card-gallery has multiple images, with the second being hidden by `display: none` (it's for mouse hover).

handleLazy is called for both. As the first image is already loaded, the early return happens and nothing goes wrong. The culprit is in the second image. We do not load the second image at all, so `.complete` remains false. That means the early return does not happen, so handleLazy goes on and add `loading` class to its ancestor, causing both images to be hidden. Now given the first image is already loaded and the second image never loads, the load listener never runs and the loading class stays forever.

Interestingly Chrome loads the second image and has `.complete` being true.