1614452 - IntersectionObserverEntry.intersectionRatio is 0 for some images

Status: RESOLVED INVALID

(Web Compatibility :: Site Reports, defect)

Description

[Ksenia Berezina [:ksenia]]

Attachment: 47761.html

As reported here https://github.com/webcompat/web-bugs/issues/47761

Steps to Reproduce:

1. Of Firefox Preview/ RDM Navigate to https://m.tribunnews.com/
2. Scroll down to "Photo Stories" section.
3. Observe the layout.

Expected:
4 photos are loaded
Actual:
Only two photos are loaded, for other two an empty placeholder is present

The site is lazy loading images based on IntersectionObserverEntry.intersectionRatio. I've attached a slightly reduced test case where the second image is missing (In Chrome intersectionRatio for this image is greater than 0 and in Firefox it's 0).

Also adding display: block; to this rule fixes the issue:

.simply .simply-img {
    height: 100%;
    position: relative;
    right: 85%;
}

Comment 1

[Ksenia Berezina [:ksenia]]

ni for Emilio as a follow up on this comment

Comment 2

[Emilio Cobos Álvarez [:emilio]]

This is a bug in the site. They're moving the image an 85% to the right of the parent. If the image is not wide enough it will be completely outside of the parent element, which has overflow: hidden.

You can see this easily if you remove the <script> element. So this is basically dependent on the alt text of the image among other things. It just happens to be the case that the way Firefox breaks the alt text is slightly different than chrome's.

Is there any way we can contact them to fix it? Either display: block, or white-space: nowrap, or what not, will fix the issue on their side.

Comment 3

[Ksenia Berezina [:ksenia]]

Thanks! I'll contact the site